阻止事件冒泡

 

图中，3为子元素，2为元素3的父元素，1为2的父元素

事件冒泡：分别给图中，元素1，元素2，元素3，添加点击事件，分别弹出1，2，3。

我们想要的是点击1元素的时候弹出为1，点击2元素的时候弹出2，点击3元素的时候弹出3。但事与愿违我们点击1元素的时候弹出1，点击2元素的时候然弹出2，后弹出1，也就是事件从2元素冒泡到1元素，因此1元素的点击事件也会被触发，其实事件会一直冒泡到根元素，只是1的父元素没有添加点击事件看不出来事件已经冒泡到根元素，同理，点击3元素的时候会弹出，3，2，1。一句话，也就是事件会一直冒泡到根元素。

为了出现在我们想要的，点3元素出现3，点2元素出现2，点击1元素出现1。这就要用到阻止事件冒泡，

ie:evt.cancelBubble = true;

w3c:stopPropagation();

ie和标准浏览器用的方法不一样，为了兼容浏览器我们得自己封装一个函数

function stopPropagation(evt)
	{

		if(evt.stopPropagation)
		{
			evt.stopPropagation(); //W3C
		}
		else
		{
			evt.cancelBubble = true; //IE
		}
	}

以上为个人理解，做为个人学习笔记。如有表达不当还望指点，初学请谅解！