如何阻止事件冒泡和默认事件?

2021-04-01 19:18发布

17条回答
猫的想法不敢猜
2楼 · 2021-04-02 09:39

1.event.stopPropagation()方法

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

2.event.preventDefault()方法

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


3.return false  ;

这个方法比较暴力,他会同事阻止事件冒泡也会阻止默认事件


但是需要注意的是:

IE:

window.event.cancelBubble = true;//停止冒泡

window.event.returnValue = false;//阻止事件的默认行为


Firefox:

event.preventDefault();// 取消事件的默认行为

event.stopPropagation(); // 阻止事件的传播

————————————————

版权声明:本文为CSDN博主「binlety」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。

原文链接:https://blog.csdn.net/binlety/article/details/81390433

来源于网络仅供参考

靓猴一枚
3楼 · 2021-04-02 09:59

一、冒泡事件

我们都知道冒泡就像水底气泡浮到水面这一过程。冒泡事件即是事件从最底层逐个经过上面一级级事件的过程,就是冒泡事件。那么如何有效的阻止冒泡事件的发生?其实在非IE浏览器中提供了一个事件对象 stopPropagation,那么在IE浏览器中有没有一个对象去阻止冒泡事件呢,答案是肯定的,通过cancelBubble事件对象可以阻止。

二、默认事件

浏览器的默认事件就是浏览器自己的行为,比如我们在点击的时候,浏览器跳转到指定页面。还有,当我们滚动鼠标时页面会向下滚动,但我们按空格键和按方向键时页面也会向下滚动,为了更好的用户体验,这时我们就需要阻止这种行为的发生。


有点好奇
4楼 · 2021-04-02 11:30

阻止事件冒泡

DOM中提供stopPropagation()方法,但IE不支持,使用event对象在事件函数中调用就行.

IE中提供的是,cancelBubble属性,默认为false,当它设置为true时,就是阻止事件冒泡,也是用event对象在事件函数中调用.

jQuery中提供了stopPropagation()方法来停止事件冒泡,当需要时,只需用用event对象来调用就行,即event.stopPropagation();

阻止默认行为

DOM中提供preventDefault()方法来取消事件默认行为,但是只有当cancelable属性设置为true的事件,才可以使用preventDefault()来取消事件默认行为,使用event对象在事件函数中调用就行。

IE中提供的是returnValue属性,默认为true,当它设置为false时,就是取消事件默认行为,也是用event对象在事件函数中调用。

jQuery中提供了preventDefault()方法来阻止元素的默认行为,只需要用event对象来调用就好,即event.preventDefault()

对于a链接,可以使用javascript伪协议来阻止默认行为


请叫我雷锋叔叔啊
5楼 · 2021-04-02 15:38

1.event.stopPropagation()方法

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

2.event.preventDefault()方法

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


3.return false  ;

这个方法比较暴力,他会同事阻止事件冒泡也会阻止默认事件


但是需要注意的是:


IE:

window.event.cancelBubble = true;//停止冒泡

window.event.returnValue = false;//阻止事件的默认行为


Firefox:

event.preventDefault();// 取消事件的默认行为

event.stopPropagation(); // 阻止事件的传播


小小收藏家
6楼 · 2021-04-02 16:19

一、冒泡事件

我们都知道冒泡就像水底气泡浮到水面这一过程。冒泡事件即是事件从最底层逐个经过上面一级级事件的过程,就是冒泡事件。那么如何有效的阻止冒泡事件的发生?其实在非IE浏览器中提供了一个事件对象 stopPropagation,那么在IE浏览器中有没有一个对象去阻止冒泡事件呢,答案是肯定的,通过cancelBubble事件对象可以阻止。

二、默认事件

浏览器的默认事件就是浏览器自己的行为,比如我们在点击的时候,浏览器跳转到指定页面。还有,当我们滚动鼠标时页面会向下滚动,但我们按空格键和按方向键时页面也会向下滚动,为了更好的用户体验,这时我们就需要阻止这种行为的发生。



猿小猿
7楼 · 2021-04-02 17:44

1.event.stopPropagation()方法

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

2.event.preventDefault()方法

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


3.return false  ;

这个方法比较暴力,他会同事阻止事件冒泡也会阻止默认事件


但是需要注意的是:

IE:

window.event.cancelBubble = true;//停止冒泡

window.event.returnValue = false;//阻止事件的默认行为


Firefox:

event.preventDefault();// 取消事件的默认行为

event.stopPropagation(); // 阻止事件的传播

————————————————

版权声明:本文为CSDN博主「binlety」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。

原文链接:https://blog.csdn.net/binlety/article/details/81390433

来源于网络仅供参考


1.event.stopPropagation()方法

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

2.event.preventDefault()方法

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

3.return false  ;

这个方法比较暴力,他会同事阻止事件冒泡也会阻止默认事件

但是需要注意的是:

IE:

window.event.cancelBubble = true;//停止冒泡

window.event.returnValue = false;//阻止事件的默认行为

Firefox:

event.preventDefault();// 取消事件的默认行为

event.stopPropagation(); // 阻止事件的传播

我的网名不再改
9楼 · 2021-04-04 12:37

阻止事件冒泡——EVENT.STOPPROPAGATION()



阻止事件冒泡——CANCELBUBBLE



阻止默认事件——EVENT.PREVENTDEFAULT()



阻止默认事件——RETURNVALUE





5.编码实现


1.阻止事件冒泡


  //IE9+,其他主流浏览器

  // var event  = event || window.event;

  // event.stopPropagation();

  //火狐未实现

 // window.event.cancelBubble = true;

  //不建议滥用,jq中可以同时阻止冒泡和默认事件

  // return false;

  //兼容模式

  //   stopBubble(event);

 

function stopBubble(e) {

    //如果提供了事件对象,则这是一个非IE浏览器

    if (e && e.stopPropagation){

    // 因此它支持W3C的stopPropagation()方法

      e.stopPropagation();

  }else{

    //否则,我们需要使用IE的方式来取消事件冒泡

    window.event.cancelBubble = true;

  }

}

2.阻止默认事件


 //全支持

  // event.preventDefault();

  //该特性已经从 Web 标准中删除,虽然一些浏览器目前仍然支持它,但也许会在未来的某个时间停止支持,请尽量不要使用该特性。

  // window.event.returnValue = false;

  //不建议滥用,jq中可以同时阻止冒泡和默认事件

  // return false;

  // 兼容

  // stopDefault(event);