js中事件冒泡及阻止冒泡的一小段code

最新推荐文章于 2019-08-21 01:19:25 发布

_吊儿郎当_

最新推荐文章于 2019-08-21 01:19:25 发布

阅读量745

点赞数

分类专栏： js 文章标签： javascript 事件事件冒泡

本文链接：https://blog.csdn.net/ljgstudy/article/details/42718755

版权

js 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

在有些情况下，　事件冒泡会给我们的应用程序带来负面的影响。　比如下面的例子（有些极端）：

<html>
	<head>
		<title></title>
		<script>
			window.onload = function(){
				var all = document.getElementsByTagName('*');
				for(var i = 0; i < all.length; i++){
					console.log('xxx');
					all[i].onmouseover = function(e){
						this.style.border = '1px solid red';
					}

					all[i].onmouseout = function(e){
						this.style.border = '0px';
					}
				}
			}

		</script>
	</head>
	<body>
		<b>This is the test page</b>
		<ul>
			<li>One</li>
			<li>Two</li>
			<li>Three</li>
			<li>
				<a href='#'>Test link</a>
			</li>
		</ul>
	</body>
</html>

上面的代码讲的是，为鼠标悬停的当前元素加上红色的边框。　可以通过为每一个ＤＯＭ元素增加mouseover和mouseout事件来时间。　如果不阻止事件冒泡，　每次把鼠标移动到一个元素上时，　该元素都会有红色的边框。这并不是我们的预期结果。　效果如下：

那如何解决这类问题呢，　。。。　额，　在这种情况下，当然得阻止时间的冒泡。　那如何阻止？　且看下面的code:

function stopBubble(e){
if(e && e.stopPropagation){
		e.stopPropagation()
	}else{
		window.event.cancleBubble = true;
	}
}

每次绑定事件调用上面的函数就可以阻止事件冒泡，从而得到预期的效果。　完整code如下：

<html>
	<head>
		<title></title>
		<script>
			window.onload = function(){
				var all = document.getElementsByTagName('*');
				for(var i = 0; i < all.length; i++){
					console.log('xxx');
					all[i].onmouseover = function(e){
						this.style.border = '1px solid red';
						stopBubble(e);
					}

					all[i].onmouseout = function(e){
						this.style.border = '0px';
						stopBubble(e);
					}
				}
			}

			function stopBubble(e){
				if(e && e.stopPropagation){
					e.stopPropagation()
				}else{
					window.event.cancleBubble = true;
				}
			}
		</script>
	</head>
	<body>
		<b>This is the test page</b>
		<ul>
			<li>One</li>
			<li>Two</li>
			<li>Three</li>
			<li>
				<a href='#'>Test link</a>
			</li>
		</ul>
	</body>
</html>

效果图如下：

_吊儿郎当_

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js中事件冒泡及阻止冒泡的一小段code

在有些情况下，　事件冒泡会给我们的应用程序带来负面的影响。　比如下面的例子（有些极端）： window.onload = function(){ var all = document.getElementsByTagName('*'); for(var i = 0; i < all.length; i++){ console.log('xxx')
复制链接

扫一扫