Question

在下面的示例中，在Firefox 3.6或Chrome 10中点击链接（因为页面滚动到顶部）但在Internet Explorer中工作后，return false似乎不会阻止默认操作。

使用event.preventDefault()可以满足我的需求，但我想知道为什么return false不能与其他人一起使用。

旁注：我不需要支持Internet Explorer。

<script>
  addEventListener("DOMContentLoaded", function(){
    document.getElementById("link").addEventListener("click", function(){
      alert("Clicked!");
      return false;
    }, false);
    alert("Click handler bound!");
  }, false);
</script>

<div style="margin-top: 1200px;">
  <a id="link" href="#">Click me!</a>
</div>

Answer 1

return false跨浏览器工作，但仅用于分配“DOM0”方式的事件处理程序，例如

document.getElementById("link").onclick = function() {
    alert("Clicked!");
    return false;
};

对于通过addEventListener()分配DOM Level 2方式的事件处理程序，您必须使用preventDefault()：

document.getElementById("link").addEventListener("click", function(evt) {
    alert("Clicked!");
    evt.preventDefault();
}, false);

对于在IE中通过attachEvent()附加的事件监听器，return false或window.event.returnValue = false会执行以下操作：

document.getElementById("link").attachEvent("onclick", function() {
    alert("Clicked!");
    return false;
});

Answer 2

你说“preventDefault()有帮助”，但你说它不起作用？我不确定我理解。你试过这个：

addEventListener("DOMContentLoaded", function() {
    document.getElementById("link").addEventListener("click", function(e) {
        alert("Clicked!");
        e.preventDefault();
        return false;
    }, false);
    alert("Click handler bound!");
}, false);

Answer 3

我遇到了一些返回false方法的跨浏览器问题。

我很幸运，只需用以下内容替换类似的href：

function removeLink(elementName) {
   var o = document.getElementById(elementName);
   o.href = 'javascript: (function(){})();';
   o.target = "_self";
}

我发现href属性中的这个空函数是最简单的。

我添加了目标_self部分，因为当我开发时，我偶尔会在新窗口/选项卡中打开这些链接（我想要悬停框）。他们需要指向当前窗口才能真正做任何事情......哈哈。

希望这可以帮助任何人。

的Brynn

从点击处理程序返回false在Firefox中不起作用

3 个答案: