js中的return false 、event.preventDefault()和event.stopPropagation()

原文地址：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中：

   content1
   content2  
   
我会根据点击链接的url不同而改变的

// 为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.οnmοusemοve=function(ev){
　　var oEvent=ev||event;
　　if(oEvent.preventDefault){oEvent.preventDefault();}
　　else{oEvent.returnValue=false;}
}