Android jQuery 单击事件在移动浏览器中不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10722730/
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 in mobile browsers
提问by Jonathan Moriarty
the jQuery click event does not seem to be firing in mobile browsers.
jQuery click 事件似乎没有在移动浏览器中触发。
The HTML is as follows:
HTML如下：
<!-- This is the main menu -->
<ul class="menu">
<li><a href="/home/">HOME</a></li>
<li class="publications">PUBLICATIONS & PROJECTS</li>
<li><a href="/about/">ABOUT</a></li>
<li><a href="/blog/">BLOG</a></li>
<li><a href="/contact/">CONTACT</a></li>
</ul>
<!-- This is the sub-menu that is to be fired on click -->
<div id="filter_wrapper">
<ul id="portfolioFilter">
<li><a href="/nutrition-related/">Nutrition related</a></li>
<li><a href="/essays/">Essays and Nonfiction</a></li>
<li><a href="/commissioned/">Commissioned works</a></li>
<li><a href="/plays/">Plays and performance</a></li>
<li><a href="/new-projects/">New Projects</a></li>
</ul>
</div>
This is the jQuery script for mobile:
这是用于移动设备的 jQuery 脚本：
$(document).ready(function(){
$('.publications').click(function() {
$('#filter_wrapper').show();
});
});
When I click the "publications" list item on a mobile browser nothing happens.
当我单击移动浏览器上的“出版物”列表项时，没有任何反应。
You can view the site here: http://www.ruthcrocker.com/
您可以在此处查看该站点：http: //www.ruthcrocker.com/
Not sure if there are jQuery mobile specific events.
不确定是否有 jQuery mobile 特定事件。
采纳答案by mason81
Raminson has a nice answer if you are already (or don't mind) using jQuery Mobile. If you want a different solution, why not just modify your code as follows:
如果您已经（或不介意）使用 jQuery Mobile，Raminson 有一个很好的答案。如果你想要一个不同的解决方案，为什么不修改你的代码如下：
change that LI you're having trouble with to include an A tag and apply the class there instead of the LI
更改您遇到问题的 LI 以包含 A 标记并在那里应用类而不是 LI
<!-- This is the main menu -->
<ul class="menu">
<li><a href="/home/">HOME</a></li>
<li><a href="#" class="publications">PUBLICATIONS & PROJECTS</a></li>
<li><a href="/about/">ABOUT</a></li>
<li><a href="/blog/">BLOG</a></li>
<li><a href="/contact/">CONTACT</a></li>
</ul>
And your javascript/jquery code... return false to stop bubbling.
和您的 javascript/jquery 代码...返回 false 以停止冒泡。
$(document).ready(function(){
$('.publications').click(function() {
$('#filter_wrapper').show();
return false;
});
});
This should work for what you are trying to do.
这应该适用于您正在尝试做的事情。
Also, I noticed your site opens the other links in new tabs/windows, is that intentional?
另外，我注意到您的网站在新标签/窗口中打开了其他链接，这是故意的吗？
回答by Hugo Silva
I know this is a resolved old topic, but I just answered a similar question, and though my answer could help someone else as it covers other solution options:
我知道这是一个已解决的老话题，但我刚刚回答了一个类似的问题，尽管我的回答可以帮助其他人，因为它涵盖了其他解决方案选项：
Click events work a little differently on touch enabled devices. There is no mouse, so technically there is no click. According to this article - http://www.quirksmode.org/blog/archives/2010/09/click_event_del.html- due to memory limitations, click events are only emulated and dispatched from anchor and input elements. Any other element could use touch events, or have click events manually initialized by adding a handler to the raw html element, for example, to force click events on list items:
单击事件在启用触摸的设备上的工作方式略有不同。没有鼠标，所以技术上没有点击。根据这篇文章 - http://www.quirksmode.org/blog/archives/2010/09/click_event_del.html- 由于内存限制，单击事件仅从锚点和输入元素模拟和调度。任何其他元素都可以使用触摸事件，或者通过向原始 html 元素添加处理程序来手动初始化单击事件，例如，在列表项上强制单击事件：
$('li').each(function(){
this.onclick = function() {}
});
Now click will be triggered by li, therefore can be listened by jQuery.
现在点击会被 li 触发，因此可以被 jQuery 监听。
On your case, you could just change the listener to the anchor element as very well put by @mason81, or use a touch event on the li:
在您的情况下，您可以将侦听器更改为@mason81 很好地放置的锚元素，或者在 li 上使用触摸事件：
$('.menu').on('touchstart', '.publications', function(){
$('#filter_wrapper').show();
});
Here is a fiddle with a few experiments - http://jsbin.com/ukalah/9/edit
这是一些实验的小提琴 - http://jsbin.com/ukalah/9/edit
回答by undefined
回答by Samar Muhammad
I had the same problem and fixed it by adding "mousedown touchstart"
我遇到了同样的问题并通过添加来修复它 "mousedown touchstart"
$(document).on("mousedown touchstart", ".className", function() {
// your code here
});
$(document).on("mousedown touchstart", ".className", function() {
// your code here
});
inested of others
被别人吞没
回答by L.A.
JqueryMobile:Important - Use $(document).bind('pageinit'), not $(document).ready():
JqueryMobile：重要 - 使用$(document).bind('pageinit')，而不是$(document).ready()：
$(document).bind('pageinit', function(){
$('.publications').vclick(function() {
$('#filter_wrapper').show();
});
});
回答by ucefkh
A Solution to Touch and Click in jQuery (without jQuery Mobile)
在 jQuery 中触摸和点击的解决方案（没有 jQuery Mobile）
Let the jQuery Mobile site build your downloadand add it to your page. For a quick test, you can also use the script provided below.
让jQuery Mobile 站点构建您的下载并将其添加到您的页面。为了快速测试，您还可以使用下面提供的脚本。
Next, we can rewire all calls to $(…).click() using the following snippet:
接下来，我们可以使用以下代码段重新连接对 $(...).click() 的所有调用：
<script src=”http://u1.linnk.it/qc8sbw/usr/apps/textsync/upload/jquery-mobile-touch.value.js”></script>
<script>
$.fn.click = function(listener) {
return this.each(function() {
var $this = $( this );
$this.on(‘vclick', listener);
});
};
</script>
回答by Ralph David Abernathy
Vohuman's answer lead me to my own implementation:
Vohuman 的回答引导我进行自己的实现：
$(document).on("vclick", ".className", function() {
// Whatever you want to do
});
Instead of:
代替：
$(document).ready(function($) {
$('.className').click(function(){
// Whatever you want to do
});
});
I hope this helps!
我希望这有帮助！
回答by PET
With this solution, you probably can resolve all mobile clicks problems. Use only "click" function, but add z-index:99 to the element in css:
使用此解决方案，您可能可以解决所有移动点击问题。仅使用“单击”功能，但将 z-index:99 添加到 css 中的元素：
$("#test").on('click', function(){
alert("CLICKED!")
});#test{
z-index:99;
cursor:pointer;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<div id="test">CLICK ME</div>Credit:https://foundation.zurb.com/forum/posts/3258-buttons-not-clickable-on-iphone
信用：https: //foundation.zurb.com/forum/posts/3258-buttons-not-clickable-on-iphone
