如何使用jQuery在Safari浏览器中识别touch事件？ 可能吗？
是否有可能使用jQuery识别iPad的Safari浏览器上的触摸事件？
我在web应用程序中使用了mouseOver和mouseOut事件。 有没有像iPad的Safari浏览器类似的事件，因为没有像mouseOut，mouseMove事件？
核心jQuery没有什么特别的触摸事件，但是你可以使用下面的事件来轻松构build你自己的
- 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）。
这里有一些很好的文档：
如果你使用的是jQuery 1.7+，那么比其他答案更简单。
$('#whatever').on({ 'touchstart' : function(){ /* do something... */ } });
最简单的方法是使用像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插件，如果你想能像我那样写jQuery的方式。
您可以使用.on（）捕获多个事件，然后testing触摸屏，例如：
$('#selector') .on('touchstart mousedown', function(e){ e.preventDefault(); var touch = e.touches[0]; if(touch){ // Do some stuff } else { // Do some other stuff } });
jQuery Core没有什么特别之处，但是你可以在jQuery Mobile Events页面阅读关于不同触摸事件的信息，这些信息也可以在iOS设备上运行。
他们是：
- 龙头
- taphold
- 刷卡
- swipeleft
- swiperight
还要注意，在滚动事件期间（基于在移动设备上的触摸），iOS设备在滚动时冻结DOM操作。
单独使用touchstart或touchend并不是一个好的解决scheme，因为如果您滚动页面，设备会将其检测为触摸或点按。 因此，同时检测轻击和点击事件的最好方法是只检测不移动屏幕的触摸事件（滚动）。 所以要做到这一点，只需将此代码添加到您的应用程序
$(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 } });
我testing了它，它适用于我和iPad和iPhone。 它检测到轻击，并可以轻松区分点击和触摸滚动。
我只是有点担心我的项目只使用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>
我知道我有点晚了，但只testing了benmajor的GitHub jQuery Touch Events插件，用于1.4和1.7+版本的JQuery。 它是轻量级的，并且可以完美地与on和bind同时为一系列触摸事件提供支持。
