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

Question

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

我在Web应用程序中使用了mouseOver和mouseOut事件.iPad的Safari浏览器是否有类似的事件,因为没有像mouseOut,mouseMove这样的事件？

Answer 1

核心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).

这是一些很好的文件:

Answer 2

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

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

Answer 3

最简单的方法是使用像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
    });

你可以坚持下去.它支持点击,双击,滑动,按住,变换(即捏合)和拖动.当发生等效的鼠标操作时,触摸事件也会触发,因此您不需要编写两组事件处理程序.哦,你需要jQuery插件,如果你想像我一样以jQueryish方式编写.

Answer 4

单独使用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 wanna execute on tap

       }
 });

我测试了它,它在iPad和iPhone上运行正常.它可以检测水龙头,轻松区分水龙头和触摸滚动.

Answer 5

您可以使用.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 6

jQuery Core没有什么特别之处,但你可以在jQuery Mobile Events页面上阅读有关不同触摸事件的内容,这些内容也可以在iOS设备之外使用.

他们是:

• 龙头
• taphold
• 刷卡
• swipeleft
• swiperight

另请注意,在滚动事件期间(基于移动设备上的触摸),iOS设备会在滚动时冻结DOM操作.

Answer 7

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