我如何识别触摸事件使用jQuery在Safari for iPad?这可能吗?

使用jQuery可以识别iPad Safari浏览器上的触摸事件吗?

我在web应用程序中使用了mouseOver和mouseOut事件。iPad的Safari浏览器没有mouseOut和mouseMove这样的事件，是否也有类似的事件?

388936 次浏览
小开
最佳答案

核心jQuery没有任何特殊的触摸事件，但您可以使用以下事件轻松构建自己的触摸事件

  • touchstart
  • touchmove
  • touchend
  • touchcancel

例如，touchmove

document.addEventListener('touchmove', function(e) {
e.preventDefault();
var touch = e.touches[0];
alert(touch.pageX + " - " + touch.pageY);
}, false);

这适用于大多数基于WebKit的浏览器(包括。Android)。

这里有一些很好的文档。

小开

我有点担心在我的项目中只使用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>
小开

最简单的方法是使用多点触控JavaScript库，如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
});

你可以继续下去。它支持点击，双击，滑动，按住，变换(即，捏)和拖动。当发生相同的鼠标操作时，触摸事件也会触发，因此不需要编写两组事件处理程序。哦，如果你想要像我一样用jQuery的方式写东西，你需要jQuery插件。

小开

jQuery核心没有什么特别的，但你可以阅读jQuery移动事件页面关于不同的触摸事件，这也适用于其他iOS设备以及。

它们是:

  • 利用
  • taphold
  • 刷卡
  • swipeleft
  • swiperight

还要注意的是，在滚动事件期间(基于移动设备上的触摸)，iOS设备在滚动时冻结DOM操作。

小开

如果你使用的是jQuery 1.7+，那么这个问题比所有这些问题都要简单。

$('#whatever').on({ 'touchstart' : function(){ /* do something... */ } });
小开

我刚刚为1.4和1.7+版本的jQuery测试了benmajor的GitHub jQuery触摸事件插件。它是轻量级的，并且与on和bind一起完美地工作，同时为一组详尽的触摸事件提供支持。

小开

你可以使用内()来捕获多个事件，然后测试屏幕上的触摸，例如:

$('#selector')
.on('touchstart mousedown', function(e){
e.preventDefault();
var touch = e.touches[0];
if(touch){
// Do some stuff
}
else {
// Do some other stuff
}
});
小开

仅使用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上运行良好。它能检测点击，并能轻松区分点击和触摸滚动。


提交答案