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

问题是,当单击按钮时,box元素也会激活其操作.基本上我希望它是一个例外,如果我点击按钮,常规框动作不会发生,而是按钮动作发生.有什么建议？

Answer 1

你所说的是事件冒泡.当您单击子元素时,它还会触发每个父级上的单击事件,直到DOM树的顶部.

stopPropagation()将取消冒泡dom树

试试这个:

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