Chrome扩展开发中如何阻止图片叠加按钮点击触发父容器事件

你之前阻止冒泡失效的常见原因如下：

1. 父容器的点击事件绑定在捕获阶段，stopPropagation()默认只能阻止冒泡阶段的事件传递
2. 按钮层级低于父容器，点击事件实际被父容器先捕获
3. 页面使用事件委托绑定点击事件（比如绑定在document、body上），事件冒泡到顶层后才触发，普通阻止冒泡无法拦截
4. 同一个触发源绑定了多个事件处理函数，stopPropagation()不会终止同元素的其他处理函数执行

方案1：完善按钮事件拦截逻辑 #

在原有点击事件中增加stopImmediatePropagation()终止所有后续事件传递，同时返回false增强兼容性：

$(img).wrap('<div class="unblurButtonContainer"></div>')
$('<button/>')
    .text('Btn')
    .addClass('unblurBtn')
    .css({
        'width': $(img).width(), 
        'height': $(img).height(),
        'position': 'absolute',
        'top': 0,
        'left': 0,
        'z-index': 99999, // 确保按钮层级最高
        'pointer-events': 'auto'
    })
    .appendTo($(img).parent())
    .click((event) => {
        event.preventDefault()
        event.stopPropagation()
        event.stopImmediatePropagation() // 终止同元素其他事件、所有后续冒泡/捕获事件
        console.log("btn pressed")
        console.log(img)
        return false // jQuery环境下额外兼容
    })
// 给包裹容器设置定位属性，否则按钮的absolute定位不生效
$('.unblurButtonContainer').css({
    'position': 'relative',
    'display': 'inline-block'
})

方案2：全局捕获阶段拦截（优先级最高） #

如果网站使用了顶层事件委托，直接在document的捕获阶段拦截按钮点击事件，优先级高于所有页面自带的事件绑定：

// 第三个参数设为true，代表在捕获阶段执行，早于所有冒泡阶段事件
document.addEventListener('click', (e) => {
    // 判断点击源是否为你的按钮或按钮内部元素
    if (e.target.closest('.unblurBtn')) {
        e.preventDefault()
        e.stopPropagation()
        e.stopImmediatePropagation()
        // 这里可以直接执行按钮的逻辑
        console.log("btn pressed")
    }
}, true)

注意要把这段代码的注入时机设置为document_start，保证比页面自身的JS代码先执行，拦截逻辑才会生效。

方案3：使用pointer-events屏蔽无关元素交互 #

如果不需要图片和包裹容器响应任何点击事件，可以通过CSS属性直接禁止它们接收点击，从根源避免事件触发：

.unblurButtonContainer img {
    pointer-events: none;
}

如果需要保留图片的交互能力，只保留按钮的交互响应即可。

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