相关文章推荐
玩滑板的绿茶  ·  jQuery.parseJSON(json) ...·  1 年前    · 
考研的松树  ·  HidD_GetManufacturerSt ...·  1 年前    · 
八块腹肌的草稿本  ·  Protobuf3 系列二 ...·  1 年前    · 

在平时项目中,如果遇到需要阻止浏览器默认行为,大家经常会用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;的方式来取消事件的默认行为。 **

event.stopPropagation(); // 这是阻止事件的冒泡方法,不让事件向documen上蔓延,但是默认事件仍然会执行,当你掉用这个方法的时候,如果点击一个连接,这个连接仍然会被打开

event.preventDefault(); // 这是阻止默认事件的方法,调用此方法是,连接不会被打开,但是会发生冒泡,冒泡会传递到上一层的父元素;

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
复制代码
分类:
前端
标签: