jQuery点击不适用于ipad答案

【问题标题】：Jquery click not working with ipadjQuery点击不适用于ipad
【发布时间】：2011-12-15 03:00:09
【问题描述】：

我们有一个 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>

欣赏指点。

javascript 已打开，并且 Ipad Safari 设置中允许弹出窗口。

【问题讨论】：

在 Safari 首选项（设置 - Safari - 开发人员）中打开调试控制台。有任何错误信息吗？

标签： jquery ipad safari

【解决方案1】：

我经常用

.bind("click touchstart", function(){

});

代替：

.click(function(){

});

这样你就绑定了正确的事件。它也更快，由于某种原因，触摸响应比点击快得多。

【讨论】：

就我而言，我不得不使用 bind("click tap", ...)
绑定到 'touchstart' 似乎可以解决问题，触摸或点击不适合我？
我还发现$('v').on('touchstart'...) 在不点击、点击和触摸的情况下也能正常工作。当元素被单独注册时，肯定有 on('click') 工作。 touchstart 并不理想，因为它发生在您希望滚动但碰巧触摸到一个元素时。
使用 touchstart/touchend 不是一个好的解决方案（对于用户体验）。如果用户碰巧触摸了您的按钮而试图向下滚动页面，它将触发该事件。有关有用的解决方案，请参阅 stackoverflow.com/a/17490775/1608100。似乎单击事件将在 ios 上为带有 cursor:pointer 的项目注册；标签默认会触发点击事件。而其他需要在 ios 上单击事件但没有 cursor:pointer 的 div 或元素不会触发。这对 ios 来说是个愚蠢的问题。
touchstart 工作但不允许滚动，cursor:pointer 不起作用。

【解决方案2】：

实际上，这已经证明是代码中的几个 javascript 更改。用 ; 调用 javascript 方法在末尾。将脚本标签放在正文而不是头部。有趣的是，甚至将显示的文本（请“单击”）更改为不是事件的内容。所以请评价等。

在 safari 上打开调试器，它没有提供太多信息，有时甚至会出错。

【讨论】：

【解决方案3】：

改用bind 函数。让它更友好。

例子：

var clickHandler = "click";

if('ontouchstart' in document.documentElement){
    clickHandler = "touchstart";
}

$(".button").bind(clickHandler,function(){
    alert('Visible on touch and non-touch enabled devices');
});

【讨论】：

这会跳过触摸设备上点击事件的延迟。
使用变量绑定是针对我的特殊情况的方法。如果任何用户由于重复绑定而在移动设备中触发两次事件时遇到问题，这就是要走的路。

【解决方案4】：

我知道很久以前有人问过这个问题，但我在搜索这个确切的问题时找到了答案。

有两种解决方案。

您可以在 html 元素上设置一个空的 onlick 属性：

<div class="clickElement" onclick=""></div>

或者你可以通过设置指针光标在css中添加：

.clickElement { cursor:pointer }

问题在于，在 ipad 上，第一次单击非锚元素会注册为悬停。这并不是一个真正的错误，因为它有助于具有尚未经过平板电脑/移动优化的悬停菜单的网站。设置光标或添加一个空的 onclick 属性会告诉浏览器该元素确实是一个可点击区域。

（通过http://www.mitch-solutions.com/blog/17-ipad-jquery-live-click-events-not-working）

【讨论】：

cursor:pointer 工作得非常好——我发现唯一的解决方案是使用 live() 通过 ajax 动态创建表。
所以这个问题的另一个解决方案是将你的
更改为。
@Esger 是的，但这不适用于我没有详细说明的情况。我有一个可排序的表格，将表格行元素包装在锚标记中并不容易。感谢您的扩展！
即使在将 div 标签更改为 a 标签后，我也必须添加一个空的 onclick。只是 a 标签似乎没有触发点击。
在寻找同样的东西时没有看到这个答案，所以解决了我将onclick="return false;" 添加到我的 div 元素的问题，这也可以正常工作。

【解决方案5】：

您可以定义一个处理程序，而不是同时定义事件 click 和 touch，您可以定义一个处理程序来查看设备是否可以使用 click 或 touch。

var handleClick= 'ontouchstart' in document.documentElement ? 'touchstart': 'click';
$(document).on(handleClick,'.button',function(){
alert('Click is now working with touch and click both');
});

【讨论】：

这不是一个好的解决方案。有些设备可以同时具有鼠标和触摸功能。

【解决方案6】：

更新：我将 .bind 切换为 .on，因为它现在是 jQuery 的首选方式。

从 jQuery 1.7 开始，.on() 方法是将事件处理程序附加到文档的首选方法。 jquery.com

示例：

$('.button').on("click touchstart", function() {

});

下面是click 和touchstart 事件的终极版本，因为即使在加载 DOM 后添加了新的 DOM 对象，它仍然会触发。为任何场景结合这个终极点击事件解决方案。

$(document).on("click touchstart", ".button", function () {

});

【讨论】：

【解决方案7】：

感谢之前的评论者，我发现以下所有方法都对我有用：

向元素添加 onclick 存根

onclick="void(0);"

或使用光标指针样式

style="cursor:pointer;"

或者在我现有的代码中，我的 jquery 代码需要点击添加

$(document).on('click tap','.ciAddLike',function(event)
{
    alert('like added!'); // stopped working in ios safari until tap added
});

我正在为感兴趣的人添加回 Apple Docs 的交叉引用。见Apple Docs:Making Events Clickable

（我不确定我的混合应用程序何时停止处理点击，但我似乎记得它们在 iOS 7 及更早版本中运行。）

【讨论】：

【解决方案8】：

我们有一个类似的问题：只要用户没有滚动页面，按钮上的点击事件就不起作用。该错误仅出现在 iOS 上。

我们通过滚动页面来解决它：

$('#modal-window').animate({scrollTop:$("#next-page-button-anchor").offset().top}, 500);

（不过，它并没有回答最终的原因。也许是 Safari 移动版中的某种错误？）

【讨论】：

【解决方案9】：

我有一个可以创建弹出窗口的跨度。如果我使用“click touchstart”，它会在 touchend 期间触发部分弹出窗口。我通过将跨度设置为“click touchend”来解决此问题。

【讨论】：

【解决方案10】：

我发现当我使绑定更具体时，它开始在 iOS 上工作。我有：

$(document).on('click tap', 'span.clickable', function(e){ ... });

当我把它改成：

$("div.content").on('click tap', 'span.clickable', function(e){ ... });

iOS 开始响应。

【讨论】：

【解决方案11】：

没有一个被赞成的解决方案对我有用。以下是最终奏效的方法：

如果在准备好的文档中不需要，我将$(document).ready 中的代码移出。如果必须在文档中准备好它，那么您将该关键代码移至jQuery(window).load()。

【讨论】：