event.cancelBubble在不同浏览器中的表现。

最新推荐文章于 2021-10-27 22:20:46 发布

iteye_20966

最新推荐文章于 2021-10-27 22:20:46 发布

阅读量292

点赞数

CC 4.0 BY-SA版权

分类专栏： JavaScript 文章标签：浏览器 Chrome IE Blog 工作

本文链接：https://blog.youkuaiyun.com/iteye_20966/article/details/81728672

JavaScript 专栏收录该内容

11 篇文章

订阅专栏

[b][color=gray]不知道自己这几天是怎么了，什么都不想做，很郁闷……
晚饭了小睡了一下，起来感觉好了一点，上JE博客瞎逛，看了些博客，觉得挺有意思。[/color][/b]

刚看到这么篇[url="http://methodmissing.iteye.com/blog/412410"]博客[/url]，文中主要内容是：虽然cancelBubble不是w3c标准，但chrome也支持事件的cancelBubble。但作者好像把cancelBubble和stopPropagation的作用混起来了。在我的印象中，cancelBubble[b]只是[/b]阻止事件冒泡的，但事件的传播方式除了“冒泡”还有“捕获”，stopPropagation是用于[b]同时[/b]阻止事件的冒泡和捕获。像文中作者所说的一样：从字面上就应该可以看出这两者的意思，cancelBubble的字面意思是取消冒泡，stopPropagation的字面意思是停止传播。

为了证实我的想法，我特意写了一小段代码来试验，试验的结果却很意外：

<html>
	<head>
		<script>
			function init(){
				document.getElementById('ul').addEventListener('click', function(event){
					alert('ul');
					event.cancelBubble = true;
				}, true);

				document.getElementById('li1').addEventListener('click', function(event){
					alert('li1');
				}, true)
				document.getElementById('li2').addEventListener('click', function(event){
					alert('li2');
				}, true)
			}
		</script>
	</head>
	<body onload="init();">
		<ul id='ul'>
			<li id='li1'>List Item1</li>
			<li id='li2'>List Item2</li>
		</ul>
	</body>
</html>

因为我给这3个元素注册的事件都是捕获型（addEventListener最后一个参数为true），但我只阻止了UL元素click事件的冒泡，并没有阻止捕获，所以如果cancelBubble真的按照我的想法工作，那么当我点击List Item1的时候，应该先弹出一个内容为“ul”的提示框，然后再弹出一个内容为“li1”的提示框，也就是说这个cancelBubble在这里应该没有作用。我试验时使用的是FireFox3.0.11，当我点击List Item1的时候，意外发生了：只弹出了一个内容为“ul”的提示框。

既然最先触发的是UL元素的click事件，那么这个事件就是捕获型的，这一点应该错不了。看来是我错了，cancalBubble的作用跟stopPropagation一样。不过这样的结果让我比较接受不了：cancelBubble的字面意思分明就是“取消冒泡”嘛，捕获型事件关它什么事？我又一想，在Chrome中它会不会有不同表现？于是我在Chrome上运行了这段代码，结果跟我之前预想的一样，先弹出“ul”，接着弹出“li1”。我又把这句event.cancelBubble=true换成event.stopPropagation()，事件的捕获就被阻止了，无论点击List Item1还是List Item2，弹出的都只有一个“ul”。

嗯，非标准的东西还是少用为好，我讨厌IE的个性。