Jquery在iPad上无法点击

Question

我们有一个网络应用程序，它使用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>

感谢指点。

iPad Safari 设置中已开启 JavaScript 并允许弹窗。

- Atchuta Vani

---

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

Answer 1

我通常使用

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

});

改为：

.click(function(){

});

这样你就绑定了正确的事件。而且它更快，由于某些原因，触摸反应比点击更快。

- Rich Bradshaw

---

在我的情况下，我必须使用bind（“click tap”，…）函数。 - schmunk

绑定到“touchstart”似乎是解决方法，对我来说触摸或点击并没有用？ - tonycoupland

我发现 $（'v'）.on（'touchstart' ...） 能够正常工作，但点击、轻触和触摸不行。当元素单独注册时，on('click') 肯定能够工作。 touchstart 不是理想的选择，因为它会在你期望滚动而碰巧触摸到元素时触发。 - PeterT

使用touchstart/touchend并不是一个好的解决方案（用于用户体验）。如果用户碰巧触摸了您的按钮，并尝试向下滚动页面，则会触发该事件。请参见https://dev59.com/SHA65IYBdhLWcg3wqAWt#17490775，以获取一种有用的解决方案。似乎在iOS上，对于具有cursor:pointer的项目将注册点击事件;默认情况下，<a>标记将触发该单击事件。而其他需要在iOS上进行单击事件但没有cursor:pointer的div或元素不会触发。这对于iOS来说是一个很愚蠢的问题。 - nwilson5

touchstart 可以工作，但不允许滚动，而 cursor:pointer 则无法工作。 - taher

Answer 2

我知道这个问题早就有人问过了，但是当我在搜索这个确切的问题时，我找到了一个答案。

有两种解决方案。

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

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

或者您可以通过设置指针光标在CSS中添加它：

.clickElement { cursor:pointer }

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

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

- lachie_h

---

cursor: pointer非常有效 - 这是我在通过ajax动态创建表时使用live()工作的唯一解决方案。 - Johncl

所以，解决这个问题的另一个方法是将你的<div>更改为<a>。 - Esger

@Esger 是的，但这对我的情况不起作用，我没有详细说明。我有一个可排序的表格，很难将表格行元素包装在锚标记中。不过还是谢谢你的扩展！ - lachie_h

我把div标签改成了a标签后，发现需要加一个空的onclick事件才能触发点击，否则只有a标签本身似乎不能触发点击。 - akotian

在寻找相同解决方案时没有看到这个答案，所以我通过将onclick="return false;"添加到我的div元素来解决我的问题，这也很好地解决了问题。 - Alex

Answer 3

更新：jQuery表示，自从1.7版本起，推荐使用.on()方法来绑定文档事件，因此我将.bind替换为.on。

根据jquery.com的说法，.on()方法是在文档中附加事件处理程序的首选方法。

例如：

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

});

下面是 click 和 touchstart 事件的最终版本，因为它仍然会在加载DOM后添加新DOM对象时触发。无论场景如何，都可以使用这个最终的点击事件解决方案。

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

});

- BBi7

Answer 4

请使用bind函数代替。 让它更加友好易用。

例如：

var clickHandler = "click";

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

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

- Samson

---

这将跳过在触摸设备上的点击事件的延迟。 - Dominique Alexandre

使用变量绑定是我特定情况下的最佳选择。如果任何用户因为重复绑定而在移动设备上触发两次事件出现问题，那么这就是正确的方法。 - KoldBane

Answer 5

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

要么在元素上添加一个onclick存根。

onclick="void(0);" 

或者使用鼠标指针样式。

style="cursor:pointer;"

或者在我的现有代码中，我的jQuery代码需要添加 tap

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

我为有兴趣的人添加了一个回到Apple文档的交叉引用。 请参见Apple文档：使事件可点击

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

- Anthony De Souza

Answer 6

也许不需要同时定义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');
});

- Abhishek

---

那不是一个好的解决方案。市面上有一些设备可以同时使用鼠标和触摸屏。 - jhruby

Answer 7

我发现当我将绑定更具体化时，它开始在iOS上工作。 我原来是这样的：

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

当我将它改为：

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

iOS 开始响应。

- djbp

Answer 8

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

- Luke Wenke

Answer 9

所有被点赞的解决方案对我都没用。最后，以下是奏效的方法：

如果在$(document).ready中不需要某些代码，就将其移到外面。如果这些关键代码必须在$(document).ready内，请将其移至jQuery(window).load()。

- user1849091

Answer 10

实际上，这只是代码中几个JavaScript更改。在调用JavaScript方法时要在末尾加上分号；将脚本标签放置在body而不是head中；有趣的是，甚至可以更改显示的文本（请“点击”）以使其不是事件。所以请评价等等。

在Safari上打开调试器，有时并没有提供太多信息或错误。

- Atchuta Vani