如何在 iPhone Web 应用程序中使用 jQuery 进行单击事件
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3025348/
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 do I use jQuery for click event in iPhone web application
提问by Gazzer
When I use jQuery for a simple click event it only works for links. Is there a way to make it work for spans etc:
当我将 jQuery 用于简单的单击事件时，它仅适用于链接。有没有办法让它适用于跨度等：
$("span.clicked").live("click", function(e){alert("span clicked!")});
$("a.clicked").live("click", function(e){alert("link clicked!")});
The SPAN works in Safari but not Mobile Safari (on iPhone or iPad) whereas the A tag works in both.
SPAN 可以在 Safari 中使用，但不能在 Mobile Safari 中使用（在 iPhone 或 iPad 上），而 A 标签在两者中都可以使用。
回答by Plynx
I struggled with this as well. After lots of toying around and trying to figure out the problem, I came across a simple solution.
我也为此苦苦挣扎。经过大量玩弄并试图找出问题之后，我找到了一个简单的解决方案。
If you set the element's cursorto pointer, it magically works again with Jquery's live and the click event. This can just be set globally in the CSS.
如果您将元素设置cursor为pointer，它会再次神奇地与 Jquery 的 live 和 click 事件一起工作。这可以在 CSS 中全局设置。
回答by Sam
You need to listen for the "touchstart" and "touchend" events. Add the listeners with jQuery...
您需要监听“touchstart”和“touchend”事件。使用 jQuery 添加侦听器...
$('span').bind( "touchstart", function(e){alert('Span Clicked!')} );
You may wish to listen for a touchstart and touchend so that you can verify that the element targeted when the finger touched is the same as the element targeted when the finger was removed.
您可能希望监听 touchstart 和 touchend，以便您可以验证手指触摸时的目标元素与手指移开时的目标元素相同。
I'm sure there is probably a better way to do it but that shouldwork :)
我确信可能有更好的方法来做到这一点，但应该可行:)
Edit: There is a better way! See https://stackoverflow.com/a/4910962/16940
编辑：有更好的方法！见https://stackoverflow.com/a/4910962/16940
回答by MonOve
You actually don't need to use the touchstart or touchend event, so long as the 'span' tag (or anything other than an 'a' tag) has a css property of:
您实际上不需要使用 touchstart 或 touchend 事件，只要“span”标签（或“a”标签以外的任何标签）具有以下 css 属性：
cursor:pointer
the click will register
点击将注册
回答by CupawnTae
You can also coax the browser to generate click events by adding an empty onclick attribute. For a belt-and-braces approach in case either approach stops working in any given iOS update, you could use something like this:
您还可以通过添加一个空的 onclick 属性来诱使浏览器生成点击事件。对于腰带和大括号方法，以防任何一种方法在任何给定的 iOS 更新中停止工作，您可以使用以下内容：
$("span.clicked").live("click", function(e){alert("span clicked!")})
.attr('onclick','')
.css('cursor','pointer');
(assuming you don't have any actual onclick attributes you don't mind obliterating)
（假设您没有任何不介意删除的实际 onclick 属性）
回答by Charlie Schliesser
You can add an empty onclickattribute, like so:
您可以添加一个空onclick属性，如下所示：
<span onclick=''>Touch or Click Me</span>
jQuery('span').live('click', function() { alert('foo'); });
回答by mcdado
When targeting iOS you have to take the following into consideration: doing event delegation in jQuery like $(document).on('click', '.target-element', function (event) {...});will not work. You have to add either onclick=""to the target HTML element or cursor: pointerto its styles.
面向 iOS 时，您必须考虑以下几点：在 jQuery 中进行事件委托是$(document).on('click', '.target-element', function (event) {...});行不通的。您必须添加onclick=""到目标 HTML 元素或其cursor: pointer样式。
Taken and adapted from http://gravitydept.com/blog/js-click-event-bubbling-on-ios:
取自并改编自http://gravitydept.com/blog/js-click-event-bubbling-on-ios：
It turns out that Safari on the iPhone does not support event delegation for click events, unless the click takes place on a link or input. Fortunately there are workarounds available.
事实证明，iPhone 上的 Safari 不支持单击事件的事件委托，除非单击发生在链接或输入上。幸运的是，有可用的解决方法。
That's the reason while the <a>tag works while <span>doesn't.
这就是<a>标签有效而<span>无效的原因。
回答by mhenry1384
I tried everything and none of the tricks worked. It turned out I couldn't get click events because I had a video element under my img. video elements apparently eat click events.
我尝试了一切，但没有一个技巧奏效。结果我无法获得点击事件，因为我的 img 下有一个视频元素。视频元素显然会吞噬点击事件。
回答by nosensus
My approach to solve this misunderstanding on document.click.
我在 document.click 上解决这种误解的方法。
Add into html after tag body next tag
<body> <div id="overlaySection" onclick="void(0)"></div> ... </body>Some style for that tag
`#overlaySection { position: fixed; top: 0; left: 0; z-index: 1; width: 100%; height: 100%; background: rgba(255, 255, 255, 0); cursor: pointer; visibility: hidden; opacity: 0; content: ""; } #overlaySection.active { opacity: 1; visibility: visible; }`Some JQuery staff
// hide overlay on document click $('#overlaySection').click(function(){ $(this).removeClass('active'); });
在标签体下一个标签之后添加到 html
<body> <div id="overlaySection" onclick="void(0)"></div> ... </body>该标签的一些样式
`#overlaySection { position: fixed; top: 0; left: 0; z-index: 1; width: 100%; height: 100%; background: rgba(255, 255, 255, 0); cursor: pointer; visibility: hidden; opacity: 0; content: ""; } #overlaySection.active { opacity: 1; visibility: visible; }`一些 JQuery 员工
// hide overlay on document click $('#overlaySection').click(function(){ $(this).removeClass('active'); });
and the main thing to active this overlay
以及激活此叠加层的主要内容
$('.dropdown > span').click(function() {
...
$('#overlaySection').addClass('active');
...
});
Hope this approach will be useful to someone. Happy coding!
希望这种方法对某人有用。快乐编码！
