在Safari/iOS中无法正常工作？

Question

我页面中有这段代码：

<a href onClick="return false;">Press me!</a>

链接被放置在一个带有有用的onClick事件的span中。

现在，在Chrome和Firefox中，这个功能完美地运行。点击链接，执行有用的事件，每个人都很高兴。在iOS（iPhone和iPad）使用默认的Safari浏览器时，这将失败 - 在链接被点击后整个页面被重新加载，有用的事件从未被执行。

我也尝试过

<a href="#" onClick="return false;">Press me!</a>

我以为这是错误的做法。在Chrome和Firefox中，它运行良好，但在iOS的Safari中，它会跳回页面的开头（但是它确实执行了有用的事件，所以在某种意义上它更好）。

我错过了什么？

- Gadi A

Answer 1

你可以设置 href="#"，但我注意到会跳转到页面顶部。 # 是一个页面内锚点，我认为它指的是页面顶部，但我不确定其定义行为。但无论如何，你想要取消它。

在 iPhone 5.0.1 模拟器中，同时使用这两种取消方法可以避免滚动到页面顶部。这是我的完整 test.html 文件。它在模拟器、Chrome 和 OS X Safari 中都可以正常工作。

<div style="height: 1000px; background-color: blue;"></div>
<a href="#" onClick="event.preventDefault(); return false;">Poke it!</a>
<div style="height: 1000px; background-color: red;"></div>

记录一下，删除 event.preventDefault(); 会导致你的 bug 重复出现。

- wjl

---

谢谢，我没有考虑使用preventDefault。 - Gadi A

Answer 2

根据您的描述，似乎是iOS浏览器JS实现中的一个bug（也许可以创建一份最小代码来演示一下？）。

一个简单的解决方法是用<span style="cursor:pointer;">替换<a href...>。

- Gai

---

这不是我所期望的解决方案，但似乎确实是iOS中的一个错误，而这个变通方法起了作用。 - Gadi A

Answer 3

你尝试过纯粹使用JavaScript绑定元素吗？

<a href="#" id="nogo">Foo</a>

document.getElementById('nogo').onclick = function(ev) {
ev.preventDefault();
};

- GillesC

---

这是一个有问题的解决方案，因为有许多这样的链接，并且它们是由一个更大的系统（phpbb）动态创建的（该链接用于显示剧透文本）。 - Gadi A

好的，没问题。既然没有具体说明，我也猜不到。你能用jQuery吗？那么你可以使用一个命令将它们全部绑定在一起，即使是新创建的元素也可以。 - GillesC

我可以进行一些黑客攻击，但我更愿意遵守规则，即提供一个HTML代码来替换消息中的剧透标签，而不是直接操作viewtopic.php。我没有指定上下文，因为在我看来，这似乎是我不理解链接工作方式的基本问题。 - Gadi A

我认为在这种情况下你无法做到那样。你只能使用preventDefault或者在href中使用#来阻止页面加载。 - Daniël Voogsgerd