jQuery 如何使我的“点击”功能适用于 iOS
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10577906/
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
How to make my 'click' function work with iOS
提问by willdanceforfun
I have a set of Div's which act as buttons. These buttons have a simple jquery click() function which works in all browsers except iOS.
我有一组充当按钮的 Div。这些按钮有一个简单的 jquery click() 函数，它适用于除 iOS 之外的所有浏览器。
For example:
例如：
<div class="button">click me</div>
and
和
$('.button').click(function(){
alert('hi');
});
I'm not sure why this doesn't work on iOS - clearly there is no 'clicking' in iOS.
我不确定为什么这在 iOS 上不起作用 - 显然 iOS 中没有“点击”。
Unfortunately I don't have an iphone device to test this myself, but I'm getting a lot of complaints from my clients who want to click things and nothing is happening.
不幸的是，我没有自己的 iphone 设备来对此进行测试，但是我收到了很多客户的抱怨，他们想要点击一些东西却什么也没有发生。
What is the key to getting this working?
使这项工作发挥作用的关键是什么？
回答by Ravi Gadag
Click": means When a mousedown and mouseup event occur on the same element OR an element is activated by the keyboard.
单击“：表示当鼠标按下和鼠标按下事件发生在同一个元素上或某个元素被键盘激活时。
from Jquery Bug, there is work around , Just add "cursor: pointer"to the element's CSS and the click event will work as expected. and you can even see this Jquery click on Iosfor help
来自Jquery Bug，有解决方法，只需添加"cursor: pointer"到元素的 CSS 中，点击事件就会按预期工作。你甚至可以看到这个Jquery 点击 Ios寻求帮助
回答by Marek Maurizio
Actually, the accepted answer did not work for me. I tried using "cursor:pointer", onclick="", and even convert the element to an anchor tag.
实际上，接受的答案对我不起作用。我尝试使用“cursor:pointer”、onclick=""，甚至将元素转换为锚标记。
What i did to make it work is to bind the touchstart event insted of the click event. To make it work on all platforms i had to to an ugly ua spoofing like this:
我所做的使其工作是绑定点击事件的 touchstart 事件。为了使它在所有平台上都能工作，我不得不像这样进行丑陋的 ua 欺骗：
var ua = navigator.userAgent,
event = (ua.match(/iPad/i) || ua.match(/iPhone/)) ? "touchstart" : "click";
jQuery("body").on(event, '.clickable_element', function(e) {
// do something here
});
回答by cptstarling
Based on Marek's answerthis is my take on it (it's a bit cleaned up):
根据Marek 的回答，这是我的看法（有点清理）：
var ua = navigator.userAgent,
pickclick = (ua.match(/iPad/i) || ua.match(/iPhone/)) ? "touchstart" : "click";
$('.clickable_element').on(pickclick, function(e) {
// do something here
});
There's still a lot of work ahead for the industry when it comes to standards…
在标准方面，该行业还有很多工作要做……
EDIT:
编辑：
Didn't work out on Android phones. Took a more rigid approach:
不适用于 Android 手机。采取了更严格的方法：
if (document.documentElement.clientWidth > 1025) { pickclick = 'click' }
if (document.documentElement.clientWidth < 1025) { pickclick = 'touchstart' }
$('.clickable_element').on(pickclick, function(e) {
// do something here
});
回答by Matthieu Pétel
Also based on Marek's answer, which adapts the event to the device to fire a function, here is a code that force to fire a click on iOS devices, where there is first a touchstart event :
同样基于Marek 的 answer，它使事件适应设备以触发功能，这是一个强制触发 iOS 设备上的点击的代码，其中首先有一个 touchstart 事件：
var UA = navigator.userAgent,
iOS = !!(UA.match(/iPad|iPhone/i));
if (iOS) {
$(document).on('touchstart', function (e) {
e.target.click();
});
}
回答by Abhishek Singh
You can use this:
你可以使用这个：
$('button').bind( "touchstart", function(){
alert('hi');
});
Another Solution is to set the element's cursor to pointer and it work with jQuery live and click event. Set it in CSS.
另一个解决方案是将元素的光标设置为指针，它可以与 jQuery live 和 click 事件一起使用。在 CSS 中设置它。
