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();