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

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

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/

jQuery父和子div激活不同的动作

2 个答案: