是否可以使用 jQuery 在 iPad 的 Safari 浏览器上识别触摸事件?
我在 Web 应用程序中使用了 mouseOver 和 mouseOut 事件。 iPad 的 Safari 浏览器是否有类似的事件,因为没有 mouseOut 和 mouseMove 之类的事件?
Core jQuery 对触摸事件没有任何特别之处,但您可以使用以下事件轻松构建自己的
触摸启动
触摸移动
触摸端
触摸取消
例如,touchmove
document.addEventListener('touchmove', function(e) {
e.preventDefault();
var touch = e.touches[0];
alert(touch.pageX + " - " + touch.pageY);
}, false);
这适用于大多数基于 WebKit 的浏览器(包括 Android)。
Here is some good documentation。
如果您使用的是 jQuery 1.7+,它甚至比所有其他答案更简单。
$('#whatever').on({ 'touchstart' : function(){ /* do something... */ } });
$('#whatever').on('touchstart click', function(){ /* do something... */ });
$('#whatever').on({ 'touchstart' : function(ev){}});
时,ev
似乎没有任何关于触摸的信息(触摸、targetTouches 或 changedTouches)
ev.originalEvent
下找到触摸信息。
单独使用 touchstart 或 touchend 不是一个好的解决方案,因为如果您滚动页面,设备也会将其检测为触摸或点击。因此,同时检测点击和单击事件的最佳方法是仅检测不移动屏幕(滚动)的触摸事件。所以要做到这一点,只需将此代码添加到您的应用程序中:
$(document).on('touchstart', function() {
detectTap = true; // Detects all touch events
});
$(document).on('touchmove', function() {
detectTap = false; // Excludes the scroll events from touch events
});
$(document).on('click touchend', function(event) {
if (event.type == "click") detectTap = true; // Detects click events
if (detectTap){
// Here you can write the function or codes you want to execute on tap
}
});
我对其进行了测试,它在 iPad 和 iPhone 上运行良好。它检测点击并可以轻松区分点击和触摸滚动。
最简单的方法是使用 multitouch JavaScript library like Hammer.js。然后你可以编写如下代码:
canvas
.hammer({prevent_default: true})
.bind('doubletap', function(e) { // And double click
// Zoom-in
})
.bind('dragstart', function(e) { // And mousedown
// Get ready to drag
})
.bind('drag', function(e) { // And mousemove when mousedown
// Pan the image
})
.bind('dragend', function(e) { // And mouseup
// Finish the drag
});
你可以继续前进。它支持点击、双击、滑动、按住、变换(即捏)和拖动。当发生等效的鼠标操作时,触摸事件也会触发,因此您无需编写两组事件处理程序。哦,如果你想像我一样用 jQueryish 方式编写,你需要 jQuery 插件。
您可以使用 .on() 捕获多个事件,然后测试屏幕上的触摸,例如:
$('#selector')
.on('touchstart mousedown', function(e){
e.preventDefault();
var touch = e.touches[0];
if(touch){
// Do some stuff
}
else {
// Do some other stuff
}
});
.bind
已弃用。您应该使用 .on
jQuery Core 没有什么特别之处,但您可以在 jQuery Mobile Events 页面上阅读有关不同触摸事件的信息,这些事件也适用于 iOS 设备以外的设备。
他们是:
轻敲
水龙头
刷卡
向左滑动
向右滑动
另请注意,在滚动事件期间(基于移动设备上的触摸)iOS 设备会在滚动时冻结 DOM 操作。
我有点担心只为我的项目使用 touchmove,因为它似乎只在您的触摸从一个位置移动到另一个位置时触发(而不是在初始触摸时)。所以我将它与 touchstart 结合起来,这似乎对初始触摸和任何动作都非常有效。
<script>
function doTouch(e) {
e.preventDefault();
var touch = e.touches[0];
document.getElementById("xtext").innerHTML = touch.pageX;
document.getElementById("ytext").innerHTML = touch.pageY;
}
document.addEventListener('touchstart', function(e) {doTouch(e);}, false);
document.addEventListener('touchmove', function(e) {doTouch(e);}, false);
</script>
X: <div id="xtext">0</div>
Y: <div id="ytext">0</div>
document.getElementById("ttime").innerHTML = ((new Date()) - touchTime); touchTime = new Date();
我刚刚为 jQuery 的 1.4 和 1.7+ 版本测试了 benmajor's GitHub jQuery Touch Events plugin。它是轻量级的,可与 on
和 bind
完美配合,同时为一组详尽的触摸事件提供支持。
不定期副业成功案例分享