我正在尝试为基于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事件？
谢谢
我正在制作一个使用JavaScript触摸事件的移动网站.在iOS Safari和Chrome for Android中,一切正常,但Android浏览器(版本4.1.2)给我带来了麻烦.
在触摸过程中,将按预期调用touchstart和touchmove事件.但是,touchmove处理程序执行的操作之一似乎会触发过早touchcancel事件.(我不确定这是否重要,但触发的动作touchcancel是修改SVG对象的viewBox属性.)如果我注释掉这个动作,则触摸过程正常进行(即完成touchmove直到touchend).
我的所有触摸处理程序都会调用该preventDefault()函数,因此问题不在于此错误中描述的问题:https://code.google.com/p/android/issues/detail？id = 19827.
我已经读过,浏览器在touchcancel调用时有很多不一致之处.股票Android浏览器是唯一对我有问题的浏览器.
那里有解决方法吗？例如,我可以完全禁用该touchcancel事件吗？我的另一个想法是让touchcancel编程器以编程方式触发另一个touchstart/ touchmove事件,但我没有做到这一点.任何想法,将不胜感激.
我尝试在html5移动版上使用界面.我尝试用touchstart/touchmove/touchend/touchcancel来实现这一目标.但是,当我试图遵循一个mouvement时,我总是快速地拥有au'touchcancel',然后再没有触摸......
当我尝试这个:http://miniapps.co.uk/code/touchcancel/ 它完美的工作,我没有任何问题.
但我认为这个问题来自于干扰我画布的Web浏览器.你知道我可以解决这个问题吗？
//我试着解释一下: - 这是我的测试代码:http://frys.free.fr/mNaissance/test.html 这是我试图使用移动设备的"Jigsaw"拼图代码.我在文本中有一个"日志"div.当我在灰色画布上"触摸移动"时,我有一个非常快的'touchcancel'而且没有'touchmove'它更清楚了吗？抱歉我的英语不好!
感谢帮助