下面这篇文章专门给不会写代码的兄弟们准备的， 语言超烂、结构乱七八糟，保证你看了以后根本辨认不出是AI写的。别怪我，我只是在满足你的需求而已。

一、 先说说为毛会有这个问题

在网页里你经常会看到卡片里还有按钮，点卡片会变成激活状态，点按钮只想弹个框， 好吧... 却不想卡片一起变色。要是这俩一起动，那就尴尬了。

拜托大家... 这背后隐藏的是事件冒泡——事件从子元素往父元素一路跑，像滚雪球一样。

举个最最常见的例子

    
这是卡片内容
    更多信息

如果不给按钮加点止血药， 它点一次卡片那边也会收到同样的 click 事件，换言之...。

二、核心思路：用 stopPropagation + preventDefault 把冒泡拦下来

• stopPropagation —— 阻止向上冒泡。
• preventDefault —— 阻止浏览器默认行为。

下面给出一段烂到不行的 jQuery 示例代码：，就这？

// 给卡片绑定点击， 点了就加 active 类
$.click {
    $.addClass
           .siblings.removeClass;
});
// 给按钮绑定点击，关键是拦截冒泡
$.click {
    e.stopPropagation;      // 阻止冒泡
    e.preventDefault;       // 阻止默认行为
    alert; // 随便弹个窗
});

当冤大头了。 注意：如果你用了原生 JS，也可以这么写：

document.querySelectorAll.forEach{
    btn.addEventListener{
        event.stopPropagation;
        event.preventDefault;
        console.log;
    });
});

三、完整 Demo

下面把所有东西凑一起，直接 copy 粘贴到本地文件打开就能看到效果。 太扎心了。 别问我为啥要这么写，我也不懂。

   

       
选项 A
   
   

       
选项 B
   
   

       
选项 C
   

四、 常见坑与“调试”技巧

1. 忘记引入 jQuery：代码报错没反应，就去检查控制台，看有没有 $ 未定义。
2. 使用了 onClick 属性：HTML 里直接写 onclick="..." 会在捕获阶段施行，stopPropagation 失效。建议全用 addEventListener 或 jQuery 的 .on
3. 父元素用了 pointer-events:none：这玩意儿会把子元素也屏蔽掉，导致根本收不到点击。
4. .stopImmediatePropagation：如果同一个元素绑定了多个监听器，用这个可以一次性砍掉后面的回调。
5. IE 老版本：只能靠 e.cancelBubble = true 来阻止冒泡，不支持标准方法。

五、 SEO 小贴士

虽然本文主要是教你怎么阻止父子事件，但如果你想让搜索引擎爱上你的页面可以适当加入以下关键词：

• "点击事件阻止"
• "jQuery stopPropagation"
• "防止父元素触发"
• "前端交互技巧"
• "网页事件冒泡解决方案"

记得在 meta description 和标题里都出现几遍，这样搜索机器人爬的时候会觉得你很专业——其实一点都不专业，我比较认同...。

六、 结论

要想让子元素单独干活，不要让父亲抢风头，就必须在子元素的事件处理函数里狠下心来调用 .stopPropagation 再配合 .preventDefault。 我晕... 代码可以随意改，只要保证这两句在前面施行就行。别忘了多测几次主要原因是不同浏览器对冒泡细节稍有差异。

⚠️ 注意：本文故意写得很烂， 如果你真的要上线，请自行润色，否则可能被搜索引擎降权或者被用户吐槽。

好吧... © 2026 烂文作者 - All rights reserved.