div内含按钮时点击事件冲突问题求助（非jQuery实现）

这是典型的DOM事件冒泡导致的问题——浏览器的事件流中，子元素触发的事件会沿着DOM树向上传播，所以点击按钮时，按钮的点击事件执行完后，事件会冒泡到父容器div，触发它的点击事件。

下面给你两种常用的原生JS解决方案，不需要依赖jQuery：

方案1：阻止按钮事件冒泡 #

在按钮的点击事件处理函数中，调用事件对象的stopPropagation()方法，直接阻止事件向上传播到父元素：

var button = document.querySelector('button');
button.addEventListener('click', function(event) {
    alert('button clicked');
    // 阻止事件继续冒泡到父容器
    event.stopPropagation();
})

var container = document.querySelector('.container');
container.addEventListener('click', function() {
    alert('container clicked');
})

注意：一定要在事件处理函数中接收event参数，不然没法调用stopPropagation()方法。如果你的按钮是表单提交按钮这类自带默认行为的元素，还可以加上event.preventDefault()来阻止默认行为，但单纯阻止冒泡只需要前者就够了。

方案2：在父容器中判断事件源 #

如果你不想修改按钮的事件逻辑，也可以在父容器的事件处理函数里，判断触发事件的目标元素是不是按钮，如果是就跳过容器的事件逻辑：

var button = document.querySelector('button');
button.addEventListener('click', function() {
    alert('button clicked');
})

var container = document.querySelector('.container');
container.addEventListener('click', function(event) {
    // 只有当点击的不是按钮时，才执行容器的事件逻辑
    if (event.target !== button) {
        alert('container clicked');
    }
})

这种方式更灵活，比如如果容器里有多个子元素都需要避免触发父事件，你还可以通过判断event.target的类名、标签名等条件来过滤。

内容的提问来源于stack exchange，提问作者user3486427