jquery处理事件冒泡

<!-- lang: html -->
<div class="foo">
<!-- lang: html -->
<span class="bar">
<!-- lang: html -->
<a href="http://www.example.cm/“>
<!-- lang: html -->
</a>
<!-- lang: html -->
</span>
<!-- lang: html -->
<p>
<!-- lang: html -->
</p>
<!-- lang: html -->
</div>

但咱们点击了<a>，这三个元素都处在用户的鼠标指针之下，而<p>元素则与此次交互操做无关。

事件捕获是首先交给最外层的元素处理，而后一层一层传到<a>

另外一种相反的策略是最具体的元素先得到响应机会，而后再冒泡到更通常的元素。

解决的办法：

例子： <!-- lang: html --> <div id="container"> <!-- lang: html --> <div id="switcher"> <!-- lang: html --> <h3>Style Switcher</h3> <!-- lang: html --> <div class="button selected" id="switcher-default"> <!-- lang: html --> Default <!-- lang: html --> </div> <!-- lang: html --> <div class="button" id="switcher-narrow"> <!-- lang: html --> Narrow Column <!-- lang: html --> </div> <!-- lang: html --> <div class="button" id="switcher-large"> <!-- lang: html --> Large Print <!-- lang: html --> </div> <!-- lang: html --> </div> <!-- lang: html --> </div>

一、事件目标

$('#switcher').click(function(event){ if(event.target == this){ $('#switcher .button').toggleClass('hidden'); } })

确保被单击的元素是<div id="switcher">，而不是外面的元素

二、下面的这种方法，虽然在跨浏览器中没法安全的使用，只要经过jquery来注册全部的事件就能够放心的使用。 $(document).ready(function() { $('#switcher .button').click(function(event) { $('body').removeClass(); if (this.id == 'switcher-narrow') { $('body').addClass('narrow'); } else if (this.id == 'switcher-large') { $('body').addClass('large'); }

$('#switcher .button').removeClass('selected'); $(this).addClass('selected'); event.stopPropagation(); //避免其余全部的DOM元素响应这个事件，这样单击的事件只会被按钮处理。 }); });

默认是冒泡，若是取消冒泡能够采用： cancelBubble=true 或者jquery的event.stopPropagation();