jQuery父級和子級divs激活不同的動作

Question

我有一個元素，其中包含許多組件。讓我們調用這個元素框。現在箱子裏面有很多不同的元素，圖片，文字和按鈕。

實施例： http://jsfiddle.net/roman_khrystynych/FSCRH/

HTML：

<div id="container"> 
     <div class="box"> 
      <div class="button">Click</div>  
     </div> 
    </div> 

的jQuery：

$('#container').on("click", ".box", function(){ 
     alert('box'); //only when anything in box except button 
    }); 

    $('#container').on("click", ".button", function(){ 
     alert('button'); //only when button clicked 
    }); 

問題是，點擊按鈕時，盒元件還激活其動作。基本上，我希望它是一個例外，如果我點擊按鈕常規框操作不會發生，而是發生按鈕操作。有什麼建議麼？

Answer 1

你所談論的是什麼事件冒泡。當你點擊一個子元素時，它也觸發每一個父元素一直到DOM樹頂部的點擊事件。

stopPropagation（）將取消冒泡DOM樹

試試這個：

$('#container').on("click", ".button", function(e){ 
     e.stopPropagation() 
     alert('button'); //only when button clicked 
    }); 

Answer 2

jquery有一個函數。 http://api.jquery.com/event.stopPropagation/

stopPropagation();

它冒泡停止click事件。

http://jsfiddle.net/honk1/FSCRH/1/