jQuery在iOS上的点击事件无效

Question

第二次更新： 看起来我的一个函数（resetFigures）阻止了事件处理程序，将其移到bind函数的末尾解决了问题。

更新： 经过一些基本测试后，我意识到点击事件正在注册，只是当点击时方块未能翻转。

我在Chrome和Firefox中使我的网站的基本美学功能工作正常，但它在iOS（使用iOS 6.1的iPhone 4和iOS 4.3.5的iPad上）上无法正常运行。

您可以在此处查看网站和脚本（main.js）：http://bos.rggwebdesigns.com/

我读到iOS实际上无法正确处理jQuery点击事件，但我很难找到修复方法。 Stack Overflow上的一些线程提到了live()方法，但像下面这样实现它（以及将onclick=""添加到可点击元素）似乎没有起作用：

$('.card').live('click touchstart', function() {
        var figure = $(this).children('.back');
        var button = figure.find('.button');
        var column = $(this).parents().eq(1);
        $('.column').removeAttr('style');
        column.css('z-index', 2000);
        resetFigures();
        if(flipCard(this)){
            swoosh.pause();
            swoosh.currentTime = 0;
            swoosh.play();
        }
    });

我还发现了这个有趣的解决方案项目：http://aanandprasad.com/articles/jquery-tappable/。然而，我也没有成功：

$('.card').tappable(function() {
        var figure = $(this).children('.back');
        var button = figure.find('.button');
        var column = $(this).parents().eq(1);
        $('.column').removeAttr('style');
        column.css('z-index', 2000);
        resetFigures();
        if(flipCard(this)){
            swoosh.pause();
            swoosh.currentTime = 0;
            swoosh.play();
        }
    });

如果我被误导了，请纠正我，但根据这个网站的说法，使用适当的前缀在iOS上支持3D变换：http://caniuse.com/transforms3d

- Bobe

---

你看到了什么问题？ - Alexander

1. live 被 on 替代。
2. 我一段时间前发现，on 也有问题：https://dev59.com/mmHVa4cB1Zd3GeqPnoMa

- mplungjan

@Alexander 在iOS上点击这些框没有任何效果，除了悬停状态。 - Bobe

这里有一个关于MDN上该问题的相当不错的总结：https://developer.mozilla.org/en/docs/Web/Events/click#Safari_Mobile - leo

Answer 1

iOS在DOM加载后添加元素未注册点击/触摸事件的问题。

尽管PPK提供了以下建议：http://www.quirksmode.org/blog/archives/2010/09/click_event_del.html

我发现这个简单的解决方法，只需将以下内容添加到CSS中：

cursor: pointer;

- BingeBoy

---

哇...这是真的吗？Safari 这次彻底搞砸了。这篇 Quirksblog 文章进一步解释了此事：http://www.quirksmode.org/blog/archives/2010/10/click_event_del_1.html - Larry

WTF！？我在想为什么使用jquery .on()在phonegap应用中IOS上的点击事件不起作用。我给一个类添加了cursor:pointer，哇！这太荒谬了，但它确实有效。这是一个五年前的话题。 - Khary

几年前在苹果某个办公室里：“让我们依靠一个 CSS 值来决定是否应该注册点击事件。” 太聪明了！ - Tashows

在我为脚本苦苦挣扎数小时，疯狂地试图找出我在哪里做错了令简单的按钮在iOS设备上无法工作时，我通过DuckDuckGo找到了这个，想着“这不可能行得通”，但还是因为绝望而尝试了一下，结果它居然奏效了。这让我的大脑混乱不堪。 - Tijmen

如果您正在使用标签<a>，您也可以将href属性添加到标签中。 <a class="card">点击这里</a> => <a class="card" href="javascript:;">点击这里</a>。 - revoke

Answer 2

最近，在为客户开发Web应用程序时，我注意到在iPad或iPhone上添加到非锚元素的任何单击事件都无法正常工作。所有桌面和其他移动设备都可以正常工作，但由于苹果产品是最受欢迎的移动设备，因此修复它非常重要。

事实证明，在jQuery中分配单击处理程序的任何非锚定元素必须具有onClick属性（可以像下面这样为空）:

onClick=""

或者

元素css需要具有以下声明：

cursor:pointer

很奇怪，但这就是让事情再次正常运转所需要的！
来源：http://www.mitch-solutions.com/blog/17-ipad-jquery-live-click-events-not-working

- saurabh kamble

---

好奇怪啊。a{cursor:pointer;} 对我起作用了。 - wils

* { /* To receive click events on iOS */ cursor: pointer; } - Krzysztof Przygoda

感谢您的信任。在我<div>中添加 onClick="" 属性，并为其添加 jQuery onClick 处理程序后，它在 Safari iOS 上也能正常工作了。这个属性之前是在其他地方都可以使用的。 - Mtxz

Answer 3

您应该绑定tap事件，因为在移动版Safari或UIWebView中不存在click事件。您也可以使用polyfill来避免触摸链接时的300毫秒延迟。

- oiledCode

---

我尝试使用bind()函数来实现'tap'和'vclick'的绑定，无论是在有还是没有使用jQuery Mobile的情况下，都没有成功。可能是因为hover伪元素的干扰，因为在iOS上，对一个定义了:hover的元素进行点击与mouseover事件等效。 - Bobe

我不知道关于悬停的内容，抱歉。 - oiledCode

没问题。只需要确保每个:hover选择器前面都有.no-touch就可以了。但这仍然无法解决事件处理的问题。 - Bobe