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

我有一个元素，其中包含许多组件。让我们把这个元素称为box。现在盒子里有很多不同的元素，图片，文本和按钮

例如：

HTML:

---

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

jquery有一个功能

stopPropagation（）

它会阻止click事件冒泡

您所说的是事件冒泡。当您单击一个子元素时，它还会在每个父元素上触发一个单击事件，一直到DOM树的顶部

stopPropagation（）将取消冒泡dom树

试试这个：

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

    $('#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
    });

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