原文地址:https://www.cnblogs.com/momo798/p/6025777.html
作用:阻止浏览器默认行为。
事件处理程序的返回值只对通过属性注册的处理程序才有意义,如果我们未通过addEventListener()函数来绑定事件的话,若要禁止默认事件,用的就是return false; 但如果要用addEventListener()或者attachEvent()来绑定,就要用preventDefault()方法或者设置事件对象的returnValue属性。
实例:
鼠标被按下后,mousedown事件被触发。
事件先从document->ancestor element->...->parent->event.target(在此元素上按下的鼠标)->parent->...->ancestor element->document.
事件走了一个循环,从documet到event.target再回到document,从event.target到document的过程叫做冒泡。
event.stopPropagation(); // 事件停止冒泡到,即不让事件再向上传递到document,但是此事件的默认行为仍然被执行,如点击一个链接,调用了event.stopPropagation(),链接仍然会被打开。
event.preventDefault(); // 取消了事件的默认行为,如点击一个链接,链接不会被打开,但是此事件仍然会传递给更上一层的先辈元素。
在事件处理函数中使用 return false; 相当于同时调用了event.stopPropagation()和event.preventDefault(),事件的默认行为不会被执行,事件也不会冒泡向上传递。
此时在jQuery中,return false;就不是简单的覆盖面和规范的问题了。在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;和event.preventDefault()二者的区别。
即尽量不要用return false;来阻止event的默认行为。
附:
event.preventDefault()方法并不被ie支持,在ie下需要用window.event.returnValue = false; 来实现。一般都是这样写,代码如下:
function stopDefault( e ) {
if ( e && e.preventDefault ){
e.preventDefault(); //支持DOM标准的浏览器
} else {
window.event.returnValue = false; //IE
}
}
也可以处理ie || firefox下图片拖动的问题。
document.onmousemove=function(ev){ var oEvent=ev||event; if(oEvent.preventDefault){oEvent.preventDefault();} else{oEvent.returnValue=false;} }