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

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


刚看到这么篇 博客,文中主要内容是:虽然cancelBubble不是w3c标准,但chrome也支持事件的cancelBubble。但作者好像把cancelBubble和stopPropagation的作用混起来了。在我的印象中,cancelBubble 只是阻止事件冒泡的,但事件的传播方式除了“冒泡”还有“捕获”,stopPropagation是用于 同时阻止事件的冒泡和捕获。像文中作者所说的一样:从字面上就应该可以看出这两者的意思,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的个性。

你可能感兴趣的:(工作,浏览器,IE,chrome,Blog)