Javascript $(document).click() 在 iPhone 上无法正常工作。查询
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3705937/
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
$(document).click() not working correctly on iPhone. jquery
提问by Garrows
This function works perfectly on IE, Firefox and Chrome but when on the iPhone, it will only work when clicking on a <img>. Clicking on the page (anywhere but on a img) wont fire the event.
此功能在 IE、Firefox 和 Chrome 上完美运行，但在 iPhone 上，它只能在单击<img>. 单击页面（除了 img 之外的任何地方）都不会触发该事件。
$(document).ready(function () {
$(document).click(function (e) {
fire(e);
});
});
function fire(e) { alert('hi'); }
The HTML part is extremely basic and shouldnt be a problem.
HTML 部分非常基础，不应该是一个问题。
Any ideas?
有任何想法吗？
采纳答案by Garrows
Adding in the following code works.
添加以下代码有效。
The problem is iPhones dont raise click events. They raise "touch" events. Thanks very much apple. Why couldn't they just keep it standard like everyone else? Anyway thanks Nico for the tip.
问题是 iPhone 不会引发点击事件。它们引发“触摸”事件。非常感谢苹果。为什么他们不能像其他人一样保持标准？无论如何，感谢尼科的小费。
Credit to: http://ross.posterous.com/2008/08/19/iphone-touch-events-in-javascript
归功于：http: //ross.posterous.com/2008/08/19/iphone-touch-events-in-javascript
$(document).ready(function () {
init();
$(document).click(function (e) {
fire(e);
});
});
function fire(e) { alert('hi'); }
function touchHandler(event)
{
var touches = event.changedTouches,
first = touches[0],
type = "";
switch(event.type)
{
case "touchstart": type = "mousedown"; break;
case "touchmove": type = "mousemove"; break;
case "touchend": type = "mouseup"; break;
default: return;
}
//initMouseEvent(type, canBubble, cancelable, view, clickCount,
// screenX, screenY, clientX, clientY, ctrlKey,
// altKey, shiftKey, metaKey, button, relatedTarget);
var simulatedEvent = document.createEvent("MouseEvent");
simulatedEvent.initMouseEvent(type, true, true, window, 1,
first.screenX, first.screenY,
first.clientX, first.clientY, false,
false, false, false, 0/*left*/, null);
first.target.dispatchEvent(simulatedEvent);
event.preventDefault();
}
function init()
{
document.addEventListener("touchstart", touchHandler, true);
document.addEventListener("touchmove", touchHandler, true);
document.addEventListener("touchend", touchHandler, true);
document.addEventListener("touchcancel", touchHandler, true);
}
回答by Simon_Weaver
Short answer:
简短的回答：
<style>
.clickable-div
{
cursor: pointer;
}
</style>
Longer answer:
更长的答案：
It's important to realize that if you're just using <a>tags everything will work as expected. You can click or drag by mistake on a regular <a>link on an iPhone and everything behaves as the user would expect.
重要的是要意识到，如果您只是使用<a>标签，一切都会按预期工作。您可以错误地单击或拖动<a>iPhone上的常规链接，一切都如用户所愿。
I imagine that you have arbitrary HTML that is not clickable - such as a panel containing text and images that cannot be wrapped with <a>. I found out about this problem when I had such a panel that I wanted to be entirely clickable.
我想您有不可点击的任意 HTML - 例如包含无法用 .html 包装的文本和图像的面板<a>。当我有一个想要完全可点击的面板时，我发现了这个问题。
<div class='clickable-div' data-href="http://www.stackoverflow.com">
... clickable content here (images/text) ...
</div>
To detect a click anywhere within this div I am using jQuery with a data-hrefhtml attribute which is shown above (this attribute is invented by myself and is not a standard jQuery or HTML data attribute.)
为了检测这个 div 中任意位置的点击，我使用 jQuery 和data-href上面显示的html 属性（这个属性是我自己发明的，不是标准的 jQuery 或 HTML 数据属性。）
$(document).on('click', '.clickable-div', function() {
document.location = $(this).data('href');
});
This will work on your desktop browser but not iPad no matter how much you click.
无论您点击多少，这都适用于您的桌面浏览器，但不适用于 iPad。
You may be tempted to change your event handler from clickto click touchstart- and this indeed does trigger the event handler. However if the user wants to drag the page up (to scroll) they'll trigger it too - which is a terrible user experience. [you may have noticed this behavior by sneaky banner ads]
您可能很想将事件处理程序从 更改click为click touchstart- 这确实会触发事件处理程序。但是，如果用户想要向上拖动页面（滚动），他们也会触发它 - 这是一种糟糕的用户体验。[您可能已经通过偷偷摸摸的横幅广告注意到这种行为]
The answer is incredibly simple: Just set the css cursor: pointer.
答案非常简单：只需设置 csscursor: pointer。
<style>
.clickable-div
{
cursor: pointer;
}
</style>
This had the added benefit for desktop users to indicate the area is clickable with a hand icon.
这为桌面用户带来了额外的好处，即可以使用手形图标来指示该区域是可点击的。
回答by Fábio N Lima
Change this:
改变这个：
$(document).click( function () {
To this
对此
$(document).on('click touchstart', function () {
Maybe this solution don't fit on your work and like described on the replies this is not the best solution to apply. Please, check another fixes from another users.
也许这个解决方案不适合你的工作，就像回复中描述的那样，这不是最好的解决方案。请检查其他用户的其他修复程序。
回答by nrutas
try this, applies only to iPhone and iPod so you're not making everything turn blue on chrome or firefox mobile;
试试这个，只适用于 iPhone 和 iPod，这样你就不会在 chrome 或 firefox mobile 上使所有东西都变成蓝色；
/iP/i.test(navigator.userAgent) && $('*').css('cursor', 'pointer');
basically, on iOS, things aren't "clickable" by default -- they're "touchable" (pfffff) so you make them "clickable" by giving them a pointer cursor. makes total sense, right??
基本上，在 iOS 上，默认情况下，事物不是“可点击的”——它们是“可触摸的”（pfffff），因此您可以通过给它们一个指针光标来使它们“可点击”。完全有道理，对吧？？
回答by Milk Man
CSS Cursor:Pointer;is a great solution. FastClickhttps://github.com/ftlabs/fastclickis another solution which doesn't require you to change css if you didn't want Cursor:Pointer;on an element for some reason. I use fastclick now anyway to eliminate the 300ms delay on iOS devices.
CSSCursor:Pointer;是一个很好的解决方案。FastClick https://github.com/ftlabs/fastclick是另一种解决方案，如果您Cursor:Pointer;出于某种原因不想要某个元素，则不需要您更改 css 。无论如何，我现在都使用 fastclick 来消除 iOS 设备上的 300 毫秒延迟。
回答by fullstacklife
On mobile iOS the click event does not bubble to the document body and thus cannot be used with .live() events. If you have to use a non native click-able element like a div or section is to use cursor: pointer;in your css for the non-hover on the element in question. If that is ugly you could look into delegate().
在移动 iOS 上，单击事件不会冒泡到文档正文，因此不能与 .live() 事件一起使用。如果您必须使用非原生的可点击元素，如 div 或 section，请使用cursor: pointer; 在您的 css 中用于非悬停在相关元素上。如果这很丑陋，您可以查看 delegate()。
回答by Tomasz ?wirski
Include this to your project. Check the "Readme" on github. https://github.com/tomasz-swirski/iOS9-Safari-Click-Fix
将此包含到您的项目中。检查 github 上的“自述文件”。 https://github.com/tomasz-swirski/iOS9-Safari-Click-Fix
