不使用return false阻止event默认行为

Posted 2020-08-15

当我们点击一个a标签时，如果这个标签的href指向了另一个地址，那么浏览器会默认跳转到此地址。在页面中，有时我们需要触发点击事件，但是又不想触发默认行为，就需要阻止event的默认行为了。

常规做法

众所周知，IE早期版本的event对象与DOM标准中的event对象并不相同，所以一般的兼容性写法是这样的：

if (event.preventDefault) {
    event.preventDefault(); //支持DOM标准的浏览器
} else {
    event.returnValue = false; //IE
}

非常规

在原生JS下

但是还有一种人，喜欢在函数结尾用return false;来阻止event默认行为，不过这种方法覆盖面不全，不建议使用，先来看规范是如何定义的：
W3C Document Object Model Events Specification 1.3.1版中。

在jQuery下：

jQuery中，就不是简单的覆盖面和规范的问题了。在jQuery事件处理函数中调用return false;相当于同时调用了preventDefault和stopPropagation方法，这会导致当前元素的事件无法向上冒泡，在事件代理模式下，会导致问题。

比如，我有一个div容器，里面是 几个a标签，它们的href里分别存储了url地址，这个url被用来动态的载入到下面的div#content中，这里为了简单演示，就只把url字符串写入到div#content中：

<div id="container">
   <a href="/content1.html">content1</a>
   <a href="/content2.html">content2</a>  
   <div id="content">我会根据点击链接的url不同而改变的</div>
</div>

// 为container下的所有a标签绑定click事件处理函数
$("#container").click(function (e) {
   if (e.target.nodeName == "A") {
        $("#content").html(e.target.href);
    }
});
// 再为a标签绑定click事件处理函数，阻止默认事件
$("#container a").click(function () {
  return false;
});

上面的代码运行后，虽然阻止了a标签的点击默认行为，但同时停止了冒泡事件，导致其外层的父元素无法检测到click事件，所以jQuery中请明白return false;和preventDefault二者的区别。

总结

不要用return false;来阻止event的默认行为