关于js中return falseevent.preventDefault()和event.stopPropagation()

Posted 2020-08-17 沐子馨

在平时项目中，如果遇到需要阻止浏览器默认行为，大家经常会用return false;和event.preventDefault()来阻止，但对它俩的区别还是有些一知半解，于是看了文档，查了些资料，在此总结下它俩的区别，顺便带上event.stopPropagation()一起区分下。

一、原生js中：

关于return false和preventDefault：

在W3C Document Object Model Events Specification1.3版本中提到过：

The EventListener interface is the primary method for handling events. Users implement the EventListener interface 
and register their listener on an EventTarget using the AddEventListener method. The users should also remove their 
EventListener from its EventTarget after they have completed using the listener.

handleEvent
This method is called whenever an event occurs of the type for which the EventListener interface was registered.

同时，在1.2.4. Event Cancelation 文档中也提到：

Cancelation is accomplished by calling the Event‘s preventDefault method. If one or more EventListeners call preventDefault 
during any phase of event flow the default action will be canceled.

html5 Section 6.1.5.1 of the HTML Spec规范定义如下：

Otherwise
If return value is a WebIDL boolean false value, then cancel the event.

也就是说，事件处理程序的返回值只对通过属性注册的处理程序才有意义，如果我们未通过addEventListener()函数来绑定事件的话，若要禁止默认事件，用的就是return false; 但如果要用addEventListener()或者attachEvent()来绑定，就要用preventDefault()方法或者设置事件对象的returnValue属性。

而H5规范中为什么要OtherWise来强调return false，因为规范中有指出在mouseover等几种特殊事件情况下，return false;并不一定能终止事件。所以，在实际使用中，我们需要尽量避免通过return false;的方式来取消事件的默认行为。

 二、在jQuery中：

这里需要先了解下事件传递机制：

例如鼠标被按下后，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;}
}