javascript - ios webkit 中的 touchend 事件没有触发？

Question

我正在尝试为基于 ios webkit 的应用程序实现一个菜单，其中用户触摸/单击并按住一个菜单按钮 ('.menu_item')，500 毫秒后子菜单打开 (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 事件绑定(bind)到菜单项，等待 500 毫秒，然后告诉子菜单显示。当用户松开手指时，应触发一个 touchend 事件以关闭子菜单。如果用户停止触摸子菜单项，则应该检测到。当前检测哪个子菜单项发生了 mouseup 事件在桌面上的 Safari 中工作:

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

但如果我使用触摸端处理程序执行相同操作，它就无法在 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

touchend 没有触发，因为 touchcancel 早先触发了。如果你想要全触摸事件处理，你需要调用

e.preventDefault()

在“touchmove”事件的回调中，否则当发生 touchmove 事件时，如果浏览器确定这是一个滚动事件，它将触发 touchcancel 而永远不会触发 touchend。