Question

我的页面中有以下代码：

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

链接放置在带有有用onClick事件的范围内。

现在，在Chrome和Firefox中，这非常有效。点击链接，执行有用的事件，每个人都很开心。在使用默认Safari浏览器的iOS（iPhone和iPad）中，这会失败 - 在点击链接后重新加载整个页面并且永远不会执行有用的事件。

我也试过

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

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

我错过了什么？

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();会复制您的错误。

Answer 2

根据您的描述，它似乎是iOS浏览器JS实现中的一个错误（可能会创建一个最小的代码来演示它吗？）。

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

Answer 3

您是否尝试过纯粹使用javascript绑定元素？

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

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

<a href="" onclick="return false;"> not working in Safari/iOS?</a>

3 个答案: