如何移除动态生成HTML元素绑定的特定click事件处理程序？

问题说明 #

通过代码给ID为container的元素添加了一个ID为download的按钮，点击该按钮时，container上的内联onclick="myclick(event)"事件也会被触发。尝试使用removeEventListener()及自定义清理方法都无法解决，且无法修改HTML代码。

核心原因 #

这是事件冒泡导致的：点击子元素时，事件会从子元素向上冒泡到父元素层级，触发父元素绑定的事件。你之前的操作都是在移除按钮自身的事件，但问题根源是父元素的事件被冒泡触发。

解决方案 #

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

给新增的按钮绑定点击事件，在处理函数中阻止事件冒泡，这样事件就不会传递到父元素container：

$(document).ready(function() {
    const $btn = $(document.createElement('button')).prop({
        type: 'button',
        innerHTML: 'Download',
        id : 'download'
    });
    // 绑定点击事件并阻止冒泡
    $btn.click(function(e) {
        e.stopPropagation();
        // 可在此添加按钮自身的业务逻辑
    });
    $('#container').append($btn);
});

function myclick(e) {
   console.log('myclick');
}

方案2：修改父元素的内联事件逻辑

虽然无法修改HTML，但可以通过JS覆盖container的onclick属性，判断触发事件的目标是否为download按钮，若是则跳过原逻辑：

$(document).ready(function() {
    $('#container').append(
        $(document.createElement('button')).prop({
            type: 'button',
            innerHTML: 'Download',
            id : 'download'
        })
    );

    // 覆盖container的onclick事件
    const container = document.getElementById('container');
    container.onclick = function(e) {
        // 仅当触发元素不是download按钮时，执行原逻辑
        if (e.target.id !== 'download') {
            myclick(e);
        }
    };
});

function myclick(e) {
   console.log('myclick');
}

为什么之前的方法无效？ #

• removeEventListener()无法移除内联onclick事件：内联事件是通过元素的onclick属性直接绑定的，removeEventListener()仅能移除通过addEventListener()绑定的事件。
• 克隆按钮的方法仅针对子元素操作，父元素的事件绑定依然存在，因此无法解决冒泡触发的问题。

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