关于js中return false、event.preventDefault()和event.stopPropagation()区别,以及阻止事件冒泡和阻止默认事件

在平时项目中,如果遇到需要阻止浏览器默认行为,大家经常会用return false;和event.preventDefault()来阻止,但对它俩的区别还是模糊,这里顺便带上event.stopPropagation()一起区分下。

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


HTML5 Section 6.1.5.1 of the HTML Spec规范定义如下:

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

翻译:

否则
如果返回值是一个WebIDL布尔值假值,则取消该事件。

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

总结:

  1. event.stopPropagation(); // 这是阻止事件的冒泡方法,不让事件向documen上蔓延,但是默认事件仍然会执行,当你掉用这个方法的时候,如果点击一个连接,这个连接仍然会被打开
  2. event.preventDefault(); // 这是阻止默认事件的方法,调用此方法是,连接不会被打开,但是会发生冒泡,冒泡会传递到上一层的父元素;
  3.  return false; 事这个方法比较暴力,他会同时阻止事件冒泡也会阻止默认事件;写上此代码,连接不会被打开,事件也不会传递到上一层的父元素;可以理解为return false就等于同时调用了event.stopPropagation()和event.preventDefault()。    在jQuery中使用return false时,相当于同时使用event.preventDefault和event.stopPropagation,它会阻止冒泡也会阻止默认行为。 但是使用原生js写时,return false只会阻止默认行为。(return false 不能用于节点直接onclick绑定函数)

附:

event.preventDefault()方法并不被ie支持,在ie下需要用window.event.returnValue = false; 来实现。一般都是这样写,代码如下:

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

 

你可能感兴趣的