原则1:
为了提供跨浏览器的一致性,jquery始终会在事件模型的冒泡阶段注册事件处理程序。因此,我们总是可以假定最具体的元素会首先获得响应事件的机会。
原则2:
IE浏览器始终是在attachEvent()在时间冒泡阶段注册事件处理程序,addEventListener(,,false)会在事件冒泡阶段处理程序
假设
1. <div id="switcher"> 2. <h3>style switcher</h3> 3. <div id="switcher-normal" class="button selected">normal</div> 4. <div id="switcher-narrow" class="button">narrow column</div> 5. <div id="switcher-large" class="button">large print</div> 6. </div>
效果图如下
图呢...
如果默认情况下,给id=swichter注册一个点击事件,因为实在时间冒泡阶段处理程序,那么点击内部div也会冒泡到顶部出发这次单击事件、
而我们理想的结果是想要在黄色的部分触发,在div下并不触发。
方法一。
event.target == this (IE中为event.srcElement)
例子:
1 $(document).ready(function(){2. $('#switcher').click(function(event){ 3. if(event.target == this){ alert("aaa") } 4. }) 5. }};只有事件目标为其本体时才触发。
方法二:event.stopPropagation()IE下为event.cancelBubble()
这样在点击内部div时,事件不会冒泡到顶部。就不会触发父元素的事件