Javascript Jquery 点击事件在移动设备上不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/30057551/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Jquery click event not working on mobile device
提问by lkw3274
I am trying to make the below JSFiddle work for tablet/mobile devices (e.g. 'on touch' as well as 'click').
我正在尝试使下面的 JSFiddle 适用于平板电脑/移动设备（例如“触摸”和“点击”）。
https://jsfiddle.net/lkw274/7zt1zL0g/87/
https://jsfiddle.net/lkw274/7zt1zL0g/87/
<div class="user-navigation">
<a class="mobile-menu-new" href=""><span></span>Menu</a>
</div>
$(document).ready(function() {
$(".user-navigation a.mobile-menu-new").click(function (e) {
e.preventDefault();
$(".user-navigation a.mobile-menu-new").toggleClass("current");
});
});
.current { background: #F00;}
Expected behaviour:On clicking 'Menu', either by touch or with clicked with mouse, the background is highlighted red until it is clicked again when the class should be removed, removing the red background and returning it to its original state.
预期行为：在单击“菜单”时，无论是通过触摸还是用鼠标单击，背景都会突出显示为红色，直到在应删除类时再次单击它，删除红色背景并将其返回到原始状态。
Current behaviour:On clicking 'Menu', by touch on mobile/tablet device, the background is highlighted red however the class is not removed when 'menu' is clicked for the second time.
当前行为：在单击“菜单”时，通过触摸移动/平板设备，背景突出显示为红色，但第二次单击“菜单”时不会删除该类。
Could anyone help to understand how this code needs to be modified for tablet/mobile devices?
任何人都可以帮助了解如何为平板电脑/移动设备修改此代码？
I have tried the solution in the below StackOverflow link however this did not function on click once implemented.
我已经在下面的 StackOverflow 链接中尝试了解决方案，但是一旦实现，这在单击时不起作用。
document-click-function-for-touch-device
Thanks in advance.
提前致谢。
回答by lshettyl
Looks like event delegationis the way to do this since, when you modify the target element, bind seems to fail.
看起来事件委托是这样做的方法，因为当您修改目标元素时，绑定似乎失败。
Try the following (works on my iPhone/Chrome).
尝试以下操作（适用于我的 iPhone/Chrome）。
$(document).ready(function() {
$(".user-navigation").delegate("a.mobile-menu-new", "click", function (e) {
e.preventDefault();
$(this).toggleClass("current");
});
});
Please note I have used .delegatesince you seem to be using jQuery 1.6(as per your fiddle) as otherwise, with jQuery 1.7+, you could use .onlike below.
请注意，我已经使用过，.delegate因为您似乎正在使用jQuery 1.6（根据您的小提琴），否则jQuery 1.7+，您可以使用.on如下。
$(document).ready(function() {
$(".user-navigation").on("click", "a.mobile-menu-new", function (e) {
e.preventDefault();
$(this).toggleClass("current");
});
});
回答by Arian Popalyar
add the cursor:pointer to the property of your class and it should work find in mobile
将 cursor:pointer 添加到您的类的属性，它应该可以在移动设备中找到
.user-navigation{ cursor:pointer }
.user-navigation{ cursor:pointer }
回答by gem007bd
$(selector).bind("click touchstart", function(){
.......
});
