JS事件流其中一种是冒泡事件,当一个元素被触发一个事件时,该目标元素的事件会优先被执行,然后向外传播到每个祖先元素,恰如水里的一个泡泡似的,从产生就一直往上浮,到在水平面时,它才消失。在这个过程中,如果你只希望事件发生在目标元素,而不想它传播到祖先元素上去,那么你需要在“泡泡”离开对象之前刺破它。
js做法:
1 function stopPropagation(e) { 2 e = e || window.event; 3 if(e.stopPropagation) { //W3C阻止冒泡方法 4 e.stopPropagation(); 5 } else { 6 e.cancelBubble = true; //IE阻止冒泡方法 7 } 8 }
或者如下:
1 function stopPro(evt){ 2 var e = evt || window.event; 3 //returnValue如果设置了该属性,它的值比事件句柄的返回值优先级高。把这个属性设置为 fasle, 4 //可以取消发生事件的源元素的默认动作。 5 //window.event?e.returnValue = false:e.preventDefault();//默认事件 6 window.event?e.cancelBubble=true:e.stopPropagation(); 7 }
jQuery做法:
方式一:event.stopPropagation();
1 $("#div1").mousedown(function(event){ 2 event.stopPropagation(); //阻止冒泡事件,上级的xxx事件不会被调用,但不阻止事件本身 3 });
方式二:return false;
1 $("#div1").mousedown(function(event){ 2 return false; //不仅阻止了事件往上冒泡,而且阻止了事件本身 3 });