0

我有一个充满绿色 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 时，会添加一个“touch”类：

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

在我的 iPhone 上查看页面，如果我触摸一个，它会变成红色（一个类被添加到它，onmouseenter）。但是，如果我将手指拖到另一个 div 中，它不会变红（没有触发 mouseenter 事件）。我已经尝试了所有能找到的事件，包括移动事件插件，但我不知道如何获得这种效果。这是一个 jsfiddle 来说明：

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

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

更新：这是一个带有 jgestures.js 的 jsfiddle。将此加载到您的手机上：

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

并将您的手指从一个方格拖到另一个方格。为什么它们不是全部变绿？

更新：这是一个 jsfiddle，其中包含推荐的其他 SO 线程的捕获：

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

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

4

1 回答 1

0

支持触摸屏功能是一件很棒的事情，随着移动设备的兴​​起等等，试试这些很棒的库之一：

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);
于 2013-01-15T19:57:50.357 回答