jquery - jQuery父子div激活不同的动作

Question

我有一个包含许多组件的元素。让我们称之为元素框。现在在盒子里面我有很多不同的元素、图片、文本和按钮。

示例： http: //jsfiddle.net/roman_khrystyny​​ch /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();

它阻止点击事件冒泡。

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