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

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

常规作法

众所周知,IE早期版本的event对象与DOM标准中的event对象并不相同,因此通常的兼容性写法是这样的:html

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

很是规

在原生JS下

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

在jQuery下:

jQuery中,就不是简单的覆盖面和规范的问题了。在jQuery事件处理函数中调用return false;至关于同时调用了preventDefaultstopPropagation方法,这会致使当前元素的事件没法向上冒泡,在事件代理模式下,会致使问题。node

好比,我有一个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的默认行为url

相关文章
相关标签/搜索