如何在 iPad 的 Safari 中使用 jQuery 识别触摸事件？是否可以？

How can I recognize touch events using jQuery in Safari for iPad? Is it possible?

提问by Abhishek B.

Is it possible to recognize touch events on the iPad's Safari browser using jQuery?

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

I used mouseOver and mouseOut events in a web application. Are there any similar events for the iPad's Safari browser since there are no events like mouseOut and mouseMove?

我在 Web 应用程序中使用了 mouseOver 和 mouseOut 事件。由于没有像 mouseOut 和 mouseMove 这样的事件，iPad 的 Safari 浏览器是否有任何类似的事件？

回答by David Pean

Core jQuery doesn't have anything special for touch events, but you can easily build your own using the following events

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

• touchstart
• touchmove
• touchend
• touchcancel

• 触摸启动
• 触摸移动
• 触摸端
• 触摸取消

For example, the touchmove

例如， touchmove

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

This works in most WebKitbased browsers (incl. Android).

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

Here is some good documentation.

这里有一些很好的文档。

回答by Timothy Perez

If you're using jQuery 1.7+ it's even simpler than all these other answers.

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

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

回答by David Johnstone

The simplest approach is to use a multitouch JavaScript library like Hammer.js. Then you can write code like:

最简单的方法是使用像 Hammer.js 这样的多点触控 JavaScript 库。然后你可以编写如下代码：

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
    });

And you can keep going. It supports tap, double tap, swipe, hold, transform (i.e., pinch) and drag. The touch events also fire when equivalent mouse actions happen, so you don't need to write two sets of event handlers. Oh, and you need the jQuery plugin if you want to be able to write in the jQueryish way as I did.

你可以继续前进。它支持点击、双击、滑动、按住、变换（即捏合）和拖动。当发生等效的鼠标操作时，也会触发触摸事件，因此您无需编写两组事件处理程序。哦，如果你想像我一样用 jQuery 风格的方式编写，你需要 jQuery 插件。

回答by Iman Sedighi

Using touchstart or touchend alone is not a good solution, because if you scroll the page, the device detects it as touch or tap too. So, the best way to detect a tap and click event at the same time is to just detect the touch events which are not moving the screen (scrolling). So to do this, just add this code to your application:

单独使用 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

       }
 });

I tested it and it works fine for me on iPad and iPhone. It detects tap and can distinguish tap and touch scroll easily.

我测试了它，它在 iPad 和 iPhone 上对我来说很好用。它检测点击并可以轻松区分点击和触摸滚动。

回答by featherbelly

You can use .on()to capture multiple events and then test for touch on the screen, e.g.:

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

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

回答by Karol

jQuery Core doesn't have anything special, but you can read on jQuery Mobile Eventspage about different touch events, which also work on other than iOS devices as well.

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

They are:

他们是：

• tap
• taphold
• swipe
• swipeleft
• swiperight

• 轻敲
• 龙头
• 刷卡
• 向左滑动
• 向右滑动

Notice also, that during scroll events (based on touch on mobile devices) iOS devices freezes DOM manipulation while scrolling.

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

回答by hanamj

I was a little bit worried about using only touchmovefor my project, since it only seems to fire when your touch moves from one location to another (and not on the initial touch). So I combined it with touchstart, and this seems to work very well for the initial touch and any movements.

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

回答by Rohan

I just tested benmajor's GitHub jQuery Touch Events pluginfor both 1.4 and 1.7+ versions of jQuery. It is lightweight and works perfectly with both onand bindwhile providing support for an exhaustive set of touch events.

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