Question

我有一个充满绿色div的页面。

<div class="square">1</div>
<div class="square">2</div>
<div class="square">3</div>
<div class="square">4</div>

样式，以便他们占据全屏：

* {font-family: sans-serif; margin: 0; padding: 0;}
html, body {height: 100%;}
.square { background: green; float: left; height: 50%; width: 50%;}
.touch {background: red;}

当你将鼠标放入每个div时，会有一类＆＃34;触摸＆＃34;被添加到它：

$(document).ready(function(){
  $('.square').bind('mouseenter', function(){
    $(this).addClass('touch');
  });
});

在我的iPhone上查看该页面，如果我触摸该页面，它会变为红色（一个类被添加到它，onmouseenter）。但是，如果我将手指拖到另一个div中，它不会变为红色（没有触发mouseenter事件）。我已经尝试过我能找到的每个活动，包括移动事件插件，但我无法弄清楚如何获得这种效果。这里有一个简单的说明：

http://jsfiddle.net/HdMgS/3/

在手机上加载，然后运行它。触摸四分之一，它变成红色。将手指放在屏幕上，尝试将手指从四分之一拖到另一个四分之一。什么都没发生。我错过了什么？谢谢！

更新：这里是jgestures.js的jsfiddle。将其加载到手机上：

http://jsfiddle.net/HdMgS/6/embedded/result/

将手指从一个方格拖到另一个方格。为什么他们都不变绿？

更新：这里有一个jsfiddle与其他推荐的SO线程的捕获：

http://jsfiddle.net/HdMgS/7/

触摸一个正方形会变成红色，很棒。但是滑入另一个方块并不会触发addClass。我错过了正确的活动吗？

Answer 1

触摸屏功能是一件很棒的事情，随着移动设备的不断增加和诸如此类的尝试，尝试使用这些优秀的库之一：

http://www.queness.com/post/11755/11-multi-touch-and-touch-events-javascript-libraries

我喜欢jGestures：

  http://jgestures.codeplex.com

因为它是一个jQuery插件，非常易于使用，并且有很多手势

  jQuery('#swipe').bind('swipeone',eventHandler);

我如何捕捉在iphone上拖动手指的javascript事件？

1 个答案: