iOS WebKit中的touchend事件没有触发？

Question

我正在尝试为基于ios webkit的应用程序实现菜单，用户触摸/点击并按住菜单按钮（'.menu_item'），500毫秒后子菜单（div.slide_up_sub_menu）打开，用户应该能够滑动手指/鼠标到子菜单li项并释放。

    <li class="menu_item">
       ASSET MANAGEMENT
       <div class="slide_up_sub_menu hidden_menu">
         <ul class="submenu">
           <li>Unified Naming Convention</li>
           <li>Version Control</li>
         </ul>
       </div>
    </li>

应用程序应该能够检测到触摸结束/鼠标松开事件发生在哪个子菜单项上。我将一个 touchstart 事件绑定到菜单项，等待500毫秒，然后告诉子菜单显示。当用户松开手指时，应该会触发 touchend 事件并关闭子菜单。如果用户停止在子菜单项上触摸，则应该检测到。目前，在桌面版的 Safari 上，可以检测到 mouseup 事件发生在哪个子菜单项上。

$('ul.submenu li').live('mouseup', function(e){
   console.log($(e.currentTarget)); //works on the desktop
});

但如果我使用touchend处理程序进行相同的操作，在iPad上无法正常工作：

$('ul.submenu li').live('touchend', function(e){
   console.log($(e.currentTarget)); //never fires
});

如果我查找每个touchend事件，当我在子菜单项上结束触摸时，我可以获得对父级子菜单项的引用：

$(document.body).bind('touchend', function(e) {
    console.log($(e.target).html()); //logs ASSET MANAGEMENT
 });

但是没有提及子菜单项。

有人知道为什么在子菜单项上没有触发touchend事件吗？

谢谢。

- Craig

Answer 1

由于之前触发了touchcancel事件，所以touchend事件没有被触发。如果您想完整地处理触摸事件，您需要调用

e.preventDefault()

如果浏览器判断touchmove事件是一个滚动事件，它将会触发touchcancel事件而不是touchend事件，因此需要在"touchmove"事件的回调函数中处理。

- Stefan

Answer 2

也许有点晚回答了。这个事件永远不会触发，因为触摸事件只在触摸开始的元素上触发。所以，要做你想做的事情，一个解决方案是使用document.elementFromPoint方法，向其发送适当的x和y坐标。

- user1368691

Answer 3

如果您不需要使用多点触控数据，您可以继续在iPad上使用mouseup。

更多阅读： http://developer.apple.com/library/IOS/#documentation/AppleApplications/Reference/SafariWebContent/HandlingEvents/HandlingEvents.html

- roee

---

感谢Roee的回答，不幸的是，当您触摸屏幕时，mousedown事件不会立即触发。它只有在您的手指与mouseup事件一起离开屏幕后才会触发。http://www.quirksmode.org/blog/archives/2008/08/iphone_events.html - Craig

Answer 4

针对你的“touchmove”事件；

如果你不想在touchmove上执行任何操作：

return false;

如果你想阻止默认行为，但在触摸移动时执行一些代码：

e.preventDefault();

这个问题在iPad上更加明显。

- Aman Kejriwal