Jquery 单击不适用于 ipad
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7892863/
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 with ipad
提问by Atchuta Vani
we have a web application which is using Jquery blockUI to open a pop up and do some action. All of this works fine on Safari, and IE 8. problem is with Ipad. none of the actions in pop up are responding. it just stays on that page. even close doesnot work. do we need to add anything else? here is the code that opens a page and click event for close.
我们有一个 Web 应用程序，它使用 Jquery blockUI 打开一个弹出窗口并执行一些操作。所有这些都可以在 Safari 和 IE 8 上正常工作。问题出在 Ipad 上。弹出窗口中的所有操作都没有响应。它只是停留在那个页面上。即使关闭也不起作用。我们还需要添加什么吗？这是打开页面并单击关闭事件的代码。
<script>
$(document).ready(function() {
$.ajaxSetup( {
cache:false
});
$("#sendInviteDiv").load("invite.htm?action=view&pid="+pid);
$.blockUI({ message: $('#sendInviteDiv'),
centerY: 0,
css: {
top: ($(window).height() - 550) /2 + 'px',
left: ($(window).width() - 870) /2 + 'px',
width: '870px'
}
});
//var ua = navigator.userAgent;
//var event = (ua.match(/iPad/i)) ? "touchstart" : "click";
//alert(ua);
$('#closeInvite').click($.unblockUI);
$('#inviteBtn').click(function() {
//script to load
//setPositionDetails('${formName}','inviteBtn');
});
}
});
</script>
appreciate pointers.
欣赏指点。
javascript is turned on and popups are allowed in Ipad Safari settings.
javascript 已打开，Ipad Safari 设置中允许弹出窗口。
回答by Rich Bradshaw
I usually use
我通常使用
.bind("click touchstart", function(){
});
instead of:
代替：
.click(function(){
});
That way you are binding the the correct event. It's also quicker, the touch responds much faster than click for some reason.
这样你就绑定了正确的事件。它也更快，由于某种原因，触摸响应比点击快得多。
回答by lachie_h
I know this was asked a long time ago but I found an answer while searching for this exact question.
我知道很久以前就有人问过这个问题，但我在搜索这个确切问题时找到了答案。
There are two solutions.
有两种解决方案。
You can either set an empty onlick attribute on the html element:
您可以在 html 元素上设置一个空的 onlick 属性：
<div class="clickElement" onclick=""></div>
Or you can add it in css by setting the pointer cursor:
或者您可以通过设置指针光标将其添加到 css 中：
.clickElement { cursor:pointer }
The problem is that on ipad, the first click on a non-anchor element registers as a hover. This is not really a bug, because it helps with sites that have hover-menus that haven't been tablet/mobile optimised. Setting the cursor or adding an empty onclick attribute tells the browser that the element is indeed a clickable area.
问题是在 ipad 上，第一次点击非锚元素会注册为悬停。这不是真正的错误，因为它有助于具有尚未经过平板电脑/移动设备优化的悬停菜单的网站。设置光标或添加一个空的 onclick 属性告诉浏览器该元素确实是一个可点击区域。
(via http://www.mitch-solutions.com/blog/17-ipad-jquery-live-click-events-not-working)
（通过http://www.mitch-solutions.com/blog/17-ipad-jquery-live-click-events-not-working）
回答by BBi7
UPDATE: I switched .bindto .onbecause it's now the preferred way says jQuery.
更新：我改用了.bind，.on因为它现在是 jQuery 的首选方式。
As of jQuery 1.7, the
.on()method is the preferred method for attaching event handlers to a document. jquery.com
从 jQuery 1.7 开始，该
.on()方法是将事件处理程序附加到文档的首选方法。jquery.com
EXAMPLE:
例子：
$('.button').on("click touchstart", function() {
});
Below is the ultimate version of the clickand touchstartevent because it still fires even with new DOM objects that are added after the DOM has been loaded. Incorporating this ultimate click event solution for any scenario.
下面是clickandtouchstart事件的最终版本，因为即使在加载 DOM 之后添加了新的 DOM 对象，它仍然会触发。为任何场景结合这个终极点击事件解决方案。
$(document).on("click touchstart", ".button", function () {
});
回答by Samson
Use bindfunction instead.
Make it more friendly.
改用bind函数。让它更友好。
Example:
例子：
var clickHandler = "click";
if('ontouchstart' in document.documentElement){
clickHandler = "touchstart";
}
$(".button").bind(clickHandler,function(){
alert('Visible on touch and non-touch enabled devices');
});
回答by Anthony De Souza
Thanks to the previous commenters I found all the following worked for me:
感谢之前的评论者，我发现以下所有内容都对我有用：
Either adding an onclick stub to the element
向元素添加 onclick 存根
onclick="void(0);"
or user a cursor pointer style
或使用光标指针样式
style="cursor:pointer;"
or as in my existing code my jquery code needed tapadded
或者在我现有的代码中，我的 jquery 代码需要点击添加
$(document).on('click tap','.ciAddLike',function(event)
{
alert('like added!'); // stopped working in ios safari until tap added
});
I am adding a cross-reference back to the Apple Docs for those interested. See Apple Docs:Making Events Clickable
我正在为感兴趣的人添加一个指向 Apple Docs 的交叉引用。请参阅Apple 文档：使事件可点击
(I'm not sure exactly when my hybrid app stopped processing clicks but I seem to remember they worked iOS 7 and earlier.)
（我不确定我的混合应用程序何时停止处理点击，但我似乎记得它们在 iOS 7 及更早版本上工作。）
回答by Abhishek
Probably rather than defining both the events click and touch you could define a an handler which will look if the device will work with click or touch.
可能不是同时定义单击和触摸事件，您可以定义一个处理程序，该处理程序将查看设备是否可以使用单击或触摸。
var handleClick= 'ontouchstart' in document.documentElement ? 'touchstart': 'click';
$(document).on(handleClick,'.button',function(){
alert('Click is now working with touch and click both');
});
回答by Eino Gourdin
We have a similar problem: the click event on a button doesn't work, as long as the user has not scrolled the page. The bug appears only on iOS.
我们有一个类似的问题：只要用户没有滚动页面，按钮上的点击事件就不起作用。该错误仅出现在 iOS 上。
We solved it by scrolling the page a little bit:
我们通过稍微滚动页面来解决它：
$('#modal-window').animate({scrollTop:$("#next-page-button-anchor").offset().top}, 500);
(It doesn't answer the ultimate cause, though. Maybe some kind of bug in Safari mobile ?)
（不过，它并没有回答最终原因。也许是 Safari 移动版中的某种错误？）
回答by Luke Wenke
I had a span that would create a popup. If I used "click touchstart" it would trigger parts of the popup during the touchend. I fixed this by making the span "click touchend".
我有一个可以创建弹出窗口的跨度。如果我使用“click touchstart”，它会在 touchend 期间触发部分弹出窗口。我通过使跨度“单击 touchend”来解决此问题。
回答by djbp
I found that when I made my binding more specific, it began to work on iOS. I had:
我发现当我让我的绑定更加具体时，它开始在 iOS 上工作。我有：
$(document).on('click tap', 'span.clickable', function(e){ ... });
When I changed it to:
当我将其更改为：
$("div.content").on('click tap', 'span.clickable', function(e){ ... });
iOS began responding.
iOS 开始响应。
回答by user1849091
None of the upvoted solutions worked for me. Here's what eventually worked:
没有一个赞成的解决方案对我有用。这是最终奏效的：
I moved the code which was in $(document).readyout, if it wasn't required in document ready. If it's mandatory to have it in document ready, then you move that critical code to jQuery(window).load().
$(document).ready如果文档中不需要它，我将输入的代码移出。如果必须在文档中准备好它，那么您将该关键代码移动到jQuery(window).load().
