Question

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

    <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>

然后，应用程序应该能够检测touchend / mouseup事件发生在哪个子菜单项上。我将touchstart事件绑定到菜单项，等待500ms，然后告诉子菜单显示。当用户释放他们的手指时，touchend事件应该触发关闭子菜单。如果用户已停止触摸子菜单项，则应检测到该子菜单项。目前检测到鼠标事件发生在哪个子菜单项目在桌面上的Safari中工作：

$('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事件？

谢谢

Answer 1

因为touchcancel早先解雇了，所以touchend没有开火。如果您想要全触摸平均处理，您需要致电

e.preventDefault()

在“touchmove”事件的回调中，否则当浏览器判定这是一个滚动事件时会发生touchmove事件，它将触发touchcancel并且从不触发touchend。

Answer 2

回答可能有点晚了。此事件永远不会触发，因为触摸事件触发了触摸发生的元素。因此，要做你想做的事，一个解决方案是使用document.elementFromPoint方法，你将向其发送适当的x和y坐标。

Answer 3

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

进一步阅读： http://developer.apple.com/library/IOS/#documentation/AppleApplications/Reference/SafariWebContent/HandlingEvents/HandlingEvents.html

Answer 4

针对您的“触摸移动”事件；

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

return false;

如果您要阻止默认行为，但在touchmove上执行一些代码：

e.preventDefault();

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

ios webkit中的touchend事件没有解雇？

4 个答案: