5

我有一个用 HTML5/JavaScript 编写的用于仪表板汽车单元的应用程序。它是一个“单页”应用程序，将片段加载到主页上的 div 中以响应不同的事件。

我被要求将它移植到浏览器上，以便它可以用于营销、演示等。

这似乎没什么大不了的，因为几乎没有什么要适应的，只需要调整一些 CSS 以便它可以在所有浏览器中显示相同。然后，他们决定要在其上运行 Web 应用程序的设备是 iPad。

该应用程序在 Safari 中运行良好，所以我认为 Mobile Safari 不会有任何问题。立刻意识到事实并非如此。该应用程序在 Mobile Safari 中根本无法运行！基本上，我的点击事件都没有触发。最重要的是，我在控制台中收到不一致的错误消息，这些消息不会出现在任何其他浏览器中。

类型错误：'null' 不是对象

浏览这个站点，我看到关于 jQuery 绑定工作和 Mobile Safari 以及哪些不工作的相互矛盾的报告。所以我决定建立自己的实验。

使用单个链接创建页面：

<a class="mylink">CLICK ME</a>

然后我尝试了这些绑定中的每一个：

$("a.mylink").click(function () { console.log("click worked"); });
$("a.mylink").bind("click", function () { console.log("bind worked"); });
$("a.mylink").live("click", function () { console.log("live worked"); });
$("a.mylink").on("click", function () { console.log("on worked"); });

我在控制台中唯一得到任何响应的是 .live()。即便如此，它还是非常不一致，通常涉及通过点击向其发送垃圾邮件。

如果我编辑我的链接并添加一个 onclick 属性，如下所示：

<a onclick="function(){}" class="mylink">CLICK ME</a>

然后 .live() 始终如一地工作，但仍然没有其他绑定。这对我来说似乎很疯狂，因为很多应用程序都可以在 Mobile Safari 上运行。我在这里有什么明显的遗漏吗？

注意，我知道如何使用 jQuery，所以在有人问之前，是的，我的绑定在$(document).ready().
另外，我知道链接一旦附加了href就可以正常工作，但这显然不是我需要的，因为这是一个单页导航应用程序，并且附加href似乎完全忽略了iOS中的任何绑定并导致完整页面导航。

4

2 回答 2

10

您必须添加 ahref="#"或将 a添加cursor:pointer到被单击的元素。

这是一个测试（在 iPad 3 中）：http: //jsfiddle.net/dZqyU/2/

<a class="clickable">I have no href :( (I dont work in iPad)</a>
<br/>
<br/>
<a class="clickable" href="#">I have href :) (I work in iPad)</a>
<br/>
<br/>
<a class="clickable cursor">I have cursor, no href :) (I work in iPad)</a>

$(document).on('click','.clickable',function(){
    alert($(this).text() + 'and the binding worked :)');
});

.cursor{
cursor:pointer;
}

我猜这个问题就像a没有属性的锚标签href未被某些 iOS Safari 版本识别为可点击元素。clickable但是，如果我们通过添加href或添加游标来明确地制作它们，pointer它就可以工作。这是一个相关链接。

于 2012-08-31T00:38:44.443 回答
1

前面的答案所说的不正确。我进行了测试，并且能够在没有内联 javascript 的情况下实现你想要实现的目标，只在 iPhone 上使用绑定。我的猜测是您在某处有一些小错字，并且由于 jQuery 具有优雅降级的神奇能力，因此没有错误被调用。

假设我所说的错误不正确，您可以尝试的一件事是将 href="#" 添加到您的锚点，然后使用 event.preventDefault() [并且您可能还需要添加 event.stopImmediatePropagation ()] 到您的代码。

您的代码中似乎极有可能存在错误（可能是完全不同且不相关的地方），桌面 Safari 足以为您找出并忽略或修复，但根据我的经验，移动 safari 的宽容度要低得多。

于 2012-08-31T02:35:14.410 回答