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/