回到课程

为什么 "return false" 不起作用?

重要程度: 3

为什么下述代码 return false 不起作用?

<script>
  function handler() {
    alert( "..." );
    return false;
  }
</script>

<a href="http://w3.org" onclick="handler()">the browser will go to w3.org</a>

浏览器在单击时会根据 URL 进行跳转,但这不是我们想要的。

如何修复?

当浏览器读取如 onclick 这样的 on* 属性时,它会根据内容创建一个处理程序。

onclick="handler()" 来说函数是:

function(event) {
  handler() // the content of onclick
}

现在我们可以看到 handler() 返回值没有被使用,也没有对结果产生影响。

修复方法很简单:

<script>
  function handler() {
    alert("...");
    return false;
  }
</script>

<a href="http://w3.org" onclick="return handler()">w3.org</a>

也可以像这样使用 event.preventDefault()

<script>
  function handler(event) {
    alert("...");
    event.preventDefault();
  }
</script>

<a href="http://w3.org" onclick="handler(event)">w3.org</a>