如何在 iPad 版 Safari 中使用 jQuery 识别触摸事件？可能吗？

Question

是否可以使用 jQuery 识别 iPad 的 Safari 浏览器上的触摸事件？

我在 Web 应用程序中使用了 mouseOver 和 mouseOut 事件。 iPad的Safari浏览器没有mouseOut和mouseMove之类的事件，是否有类似的事件？

Answer 1

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.

Answer 2

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

Answer 3

最简单的方法是使用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 插件。

Answer 4

jQuery Core 没有什么特别之处，但您可以在 jQuery Mobile Events 页面上阅读有关不同触摸事件的信息，这些事件也适用于 iOS 设备以外的设备。

他们是：

• 点击
• 轻拍
• 滑动
• 向左滑动
• 向右滑动

另请注意，在滚动事件期间（基于移动设备上的触摸）iOS 设备会在滚动时冻结 DOM 操作。

Answer 5

如果您使用的是 jQuery 1.7+，它甚至比所有其他答案更简单。

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

Answer 6

我刚刚为 1.4 和 1.7+ 版本的 jQuery 测试了 benmajor's GitHub jQuery Touch Events plugin。它是轻量级的，可与on 和bind 完美配合，同时为详尽的触摸事件集提供支持。

Answer 7

您可以使用.on() 捕获多个事件，然后测试屏幕上的触摸，例如：

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

Answer 8

单独使用 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 上运行良好。它检测到点击，可以轻松区分点击和触摸滚动。