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


191

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

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

Answers:


240

核心jQuery的触摸事件没有什么特别的,但是您可以使用以下事件轻松构建自己的事件

  • 触摸开始
  • 触摸移动
  • 触摸端
  • 触摸取消

例如, touchmove

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

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

这是一些好的文档


2
非常感谢David,我认为它将起作用,但是e.touches [0]是什么?您可以详细描述参数“ e”吗?
Abhishek B.

7
e是自动传递给处理程序的事件对象。对于safari浏览器(以及android)来说,它现在包含用户在屏幕上进行的所有触摸的数组。每次触摸都有其自己的属性(例如,x,y坐标)
David Pean

1
现在,您如何去寻找触发事件的要素-__-
穆罕默德·乌默

148

如果您使用的是jQuery 1.7+,则比所有其他答案还要简单。

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

1
是的,蒂莫西(Timothy),在启动项目时并没有使用1.7+版本。现在onwords我正在使用jQuery 1.7+ ..感谢您的良好建议和答复..非常感谢。:)
Abhishek B.

7
这很好。我需要单击和touchstart来完成相同的操作,并且我习惯了非对象语法,例如$('#whatever').on('touchstart click', function(){ /* do something... */ });
goodeye 2013年

1
当我走时$('#whatever').on({ 'touchstart' : function(ev){}});ev似乎没有任何有关触摸的信息(touches,targetTouches或changedTouches)
Octopus

8
@Octopus:您可以在下找到触摸信息ev.originalEvent
彼得·布卢姆菲尔德

1
@edonbajrami是的,当然。检查文档并查找“授权事件”。$(“#element监视新元素”).on(“ eventX”,“ #element”,function(event){/ *无论* /});
honk31 2014年

24

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

而且您可以继续前进。它支持轻按,双击,轻扫,按住,变换(即捏)和拖动。当发生等效的鼠标操作时,触摸事件也会触发,因此您无需编写两组事件处理程序。哦,如果您希望能够像我一样以jQueryish方式编写,则需要jQuery插件。


29
“最简单”的解决方案永远不会涉及通过添加库使问题变得更加复杂
Octopus

13
@Octopus最简单的解决方案是使用Hammer.js来抽象化跨浏览器的头痛。使用jQuery扩展名在您熟悉的区域中。对我来说似乎并不复杂。
trusktr 2014年

1
所谓的“最简单”解决方案通常是人们最
费力的

1
@Octopus:“当你只有一把锤子[原文] ...一切看起来都像钉子” :)
飘编码

现在是锤子时间!感谢您共享此库,它很容易在我的应用程序上安装并开始运行!由于事件处理程序有所不同,因此花了一秒钟时间进行设置,但是一个简单的console.log(event)会告诉您所需的内容。谢谢!
安迪

24

单独使用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上都能正常工作。它检测点击,并可以轻松区分点击和触摸滚动。


2
该解决方案似乎是我找到的最直接的解决方案,并且似乎在iOS上运行良好。
约书亚·劳伦斯·奥斯蒂尔

我先使用了jquery mobile,但随后又干扰了其他功能。我现在正在使用它,效果很好。到目前为止没有问题。
阿努拉格·普里亚达希

18

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

15

jQuery Core没有什么特别的,但是您可以在jQuery Mobile Events页面上阅读有关不同触摸事件的信息,这些事件也可以在iOS设备以外的其他设备上使用。

他们是:

  • 轻拍
  • 轻拍
  • 轻扫
  • 向左滑动
  • 向右滑动

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


感谢您拨出重要时间回答我的问题。我正在调查Jquery Mobile事件。。谢谢。
Abhishek B.

这些事件并不能真正代表真实的触摸交互。
trusktr 2014年

jQuery Core是实际的专有名词吗?
Peter Mortensen

6

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

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.