原生JS下事件冒泡解决方案

最新推荐文章于 2024-05-12 21:38:39 发布

原创最新推荐文章于 2024-05-12 21:38:39 发布 · 884 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#JS原生 #事件冒泡

JS 专栏收录该内容

2 篇文章

订阅专栏

本文分享了一种解决JS事件冒泡问题的小技巧，通过一个封装好的函数来阻止事件的冒泡行为，适用于非IE及IE浏览器。文章提供了函数代码及调用示例。

事件冒泡和事件捕捉对于很多初学JS的人来说都是一件很烦的事情,总是有点蛋疼.
至于事件冒泡怎么产生的,看看前辈这篇文章说的很清楚
https://blog.youkuaiyun.com/u013194113/article/details/52027275

我是一个很懒的人,所以基本上不太喜欢吧这种常见问题每次拿出来写一遍,就封装了一个小函数.希望对大家有用.

function stopP(type,fun,name)
{
	var vo=document.getElementById(name);
    vo.addEventListener(type,function(ev){
		  fun();
		 if(ev&&ev.stopPropagation){//非IE
           ev.stopPropagation();
          }
           else{//IE
          window.event.cancelBubble=true;
          }

	},false);		
}
调用:

stopP(“click”,div2,“div2”);

type : click 事件
fun:事件触发函数的本体
name :事件绑定的HTML元素ID