jquery.click() 在 iOS 中不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15095868/
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() not working in iOS
提问by Andrei
HTML:
HTML：
<div id="footer">
<a class="button1 selected" id="button1" href="#"><div class="icon"></div><div class="text">Option 1</div></a>
<a class="button2" id="button2" href="#"><div class="icon"></div><div class="text">Option 2</div></a>
<a class="button3" id="button3" href="#"><div class="icon"></div><div class="text">Option 3</div></a>
<a class="button4" id="button4" href="#"><div class="icon"></div><div class="text">Option 4</div></a>
</div>
JS:
JS：
$('#button1').click(function() {
alert('button1');
});
$('#button2').click(function() {
alert('button2');
});
Now, this script works perfectly on my PC Browser but it doesn't work on iOS. I've tried this solution too: $(document).click() not working correctly on iPhone. jquerybut it doesen't work.
现在，此脚本在我的 PC 浏览器上运行良好，但在 iOS 上不起作用。我也试过这个解决方案：$(document).click() 在 iPhone 上不能正常工作。jquery但它不起作用。
I am using on jQuery 1.8.3, no jQuery Mobile (I prefer not to).
我在 jQuery 1.8.3 上使用，没有 jQuery Mobile（我不喜欢）。
Somebody can help me with this?
有人可以帮我解决这个问题吗？
回答by Derek
Try to add a pointer cursor to the button and use .on to bind the click event.
尝试将指针光标添加到按钮并使用 .on 绑定单击事件。
$('#button1').css('cursor','pointer');
$(document).on('click', '#button1', function(event) {
event.preventDefault();
alert('button1');
});
回答by Yacuzo
I came across this: http://www.quirksmode.org/blog/archives/2014/02/mouse_event_bub.html
我遇到了这个：http: //www.quirksmode.org/blog/archives/2014/02/mouse_event_bub.html
In short, one of these conditions needs to be met for iOS browsers to generate click events from touch-events:
简而言之，iOS浏览器需要满足以下条件之一才能从触摸事件生成点击事件：
- The target element of the event is a link or a form field.
- The target element, or any of its ancestors up to but not including the
<body>, has an explicit event handler set for any of the mouse events. This event handler may be an empty function.- The target element, or any of its ancestors up to and including the document has a cursor: pointer CSS declarations.
- 事件的目标元素是链接或表单域。
- 目标元素或其任何祖先元素（直到但不包括
<body>）具有为任何鼠标事件设置的显式事件处理程序。此事件处理程序可能是一个空函数。- 目标元素或其任何祖先元素（直到并包括文档）都有一个 cursor: pointer CSS 声明。
回答by Ed Kolosovsky
A general solution might be something like this:
一般的解决方案可能是这样的：
JS
JS
const IS_IOS = /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream;
if (IS_IOS) {
document.documentElement.classList.add('ios');
}
CSS
CSS
.ios,
.ios * {
// causes dom events events to be fired
cursor: pointer;
}
回答by Marc
The simplest solution to this issue is to just add cursor: pointer;to the style (CSS) of the element that you are targeting.
解决此问题的最简单方法是添加cursor: pointer;到您所针对的元素的样式 (CSS)。
#button1 {
cursor: pointer;
}
Alternatively, this could be added inline:
或者，这可以内联添加：
<a class="button1 selected" id="button1" href="#" style="cursor: pointer;"><div class="icon"></div><div class="text">Option 1</div></a>
回答by DUzun
Yacuzo's answer is the most exhaustive. But I want to add the 4th trick (my favorite):
Yacuzo 的回答是最详尽的。但我想添加第四个技巧（我最喜欢的）：
$('div:first').on('click', $.noop);
$('div:first').on('click', $.noop);
And it doesn't matter whether the first div is a parent of your target element or not!
第一个 div 是否是目标元素的父元素并不重要！
