阻止JavaScript事件冒泡传递（cancelBubble 、stopPropagation）

最新推荐文章于 2025-12-05 08:37:05 发布
原创 最新推荐文章于 2025-12-05 08:37:05 发布 · 413 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#javascript #xhtml #div #html #function

本文深入探讨了JavaScript中事件冒泡的概念，并详细解释了如何使用cancelBubble和stopPropagation来控制事件传播，通过实例演示了阻止事件冒泡的具体应用。
部署运行你感兴趣的模型镜像

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="gb2312">
<head>
<title> 阻止JavaScript事件冒泡传递（cancelBubble 、stopPropagation）</title>
<meta name="keywords" content="JavaScript,事件冒泡,cancelBubble,stopPropagation" />
<script type="text/javascript">
function doSomething (obj,evt) {
alert(obj.id);
var e=(evt)?evt:window.event;
if (window.event) {
e.cancelBubble=true;
} else {
//e.preventDefault();
e.stopPropagation();
}
}
</script>
</head>
<body>
<div id="parent1" onclick="alert(this.id)" style="width:250px;background-color:yellow">
<p>This is parent1 div.</p>
<div id="child1" onclick="alert(this.id)" style="width:200px;background-color:orange">
<p>This is child1.</p>
</div>
<p>This is parent1 div.</p>
</div>
<br />
<div id="parent2" onclick="alert(this.id)" style="width:250px;background-color:cyan;">
<p>This is parent2 div.</p>
<div id="child2" onclick="doSomething(this,event);" style="width:200px;background-color:lightblue;">
<p>This is child2. Will bubble.</p>
</div>
<p>This is parent2 div.</p>
</div>
</body>
</html>

详细出处参考：http://www.jb51.net/article/9858.htm

您可能感兴趣的与本文相关的镜像

Wan2.2-T2V-A5B

Wan2.2-T2V-A5B

文生视频
Wan2.2

Wan2.2是由通义万相开源高效文本到视频生成模型，是有​50亿参数的轻量级视频生成模型，专为快速内容创作优化。支持480P视频生成，具备优秀的时序连贯性和运动推理能力

qc_mwq
关注
JS事件冒泡之cancelBubble和stoppropagation
qq_44731369的博客
07-09 1155
什么是事件冒泡？ 在一个对象上绑定了某类事件 (如：onclick)，事件冒泡就是从当前触发的事件，由里到外，逐渐向父级对象传播，直到document为止。 其实stopPropagation的作用跟cancelBubble是一样的，都是用来阻止浏览器默认的事件冒泡行为。 不同之处在于： （1）stopPropagation符合W3C标准，适用于FireFox等浏览器，不支持IE （2）cancelBubble方法不符合W3C标准，只支持IE浏览 所以，很多时候我们都需要结合起来使用。 <!DOCTY
阻止JavaScript事件冒泡传递
稻花香的博客
06-06 930
方法一： <a onclick="test2()">链接<p onclick="test(event)" style="font-size:20px">你好</p></a> function test(a) { window.event.cancelBubble = true; //用来禁止点击冒泡事件 阻止J...
事件冒泡之cancelBubble和stoppropagation的区别
热门推荐
iammarrio的博客
10-20 2万+
事实上stoppropagation和cancelBubble的作用是一样的，都是用来阻止浏览器默认的事件冒泡行为。 不同之处在于stoppropagation属于W3C标准，试用于Firefox等浏览器，但是不支持IE浏览器。相反cancelBubble不符合W3C标准，而且只支持IE浏览器。所以很多时候，我们都要结合起来用。不过，cancelBubble在新版本chrome,opera浏览器
取消冒泡 html,阻止JavaScript事件冒泡传递
weixin_31602525的博客
07-01 146
CodeJavaScript代码//如果提供了事件对象，则这是一个非IE浏览器if ( e && e.stopPropagation )//因此它支持W3C的stopPropagation()方法e.stopPropagation();else//否则，我们需要使用IE的方式来取消事件冒泡window.event.cancelBubble = true;return false;2...
在JavaScript 如何阻止事件冒泡和事件默认行为？
前端大白话
07-20 1015
事件冒泡和默认行为是JavaScript事件处理中的两个核心概念，理解并掌握它们的控制方法，是写出流畅交互的前提。事件冒泡就像水中涟漪，会从触发点向上扩散，能有效阻止这种扩散，避免父元素的事件被误触发。这在处理嵌套元素的交互（如弹窗、下拉菜单）时特别重要，能防止“点A触发B”的乌龙事件。浏览器的默认行为是把双刃剑，方便了基础交互却限制了自定义需求。就像一把“总开关”，能禁用这些预设动作，让我们自由实现表单验证、自定义链接跳转等功能。事件对象是基础，必须正确获取和传递现代项目优先用和。
JavaScript--阻止事件冒泡stopPropagation和cancelBubble
weixin_30475039的博客
10-21 184
1 <!DOCTYPE html> 2 <html lang="en" xmlns="http://www.w3.org/1999/html"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 &...
详解javascript如何阻止冒泡事件及阻止默认事件
Sunny王维
09-13 1170
一、事件冒泡 二、默认行为 在说事件冒泡之前，我们先说说事件对象（Event） Event 1、在触发DOM上某个事件时，会产生一个事件对象event，这个对象包含着所有事件有关的信息（导致事件的元素、事件的类型、与特定事件相关的信息） 2、所有浏览器都支持Event对象，但支持方式不同 3、IE中的事件对象：window.event 一、事件冒泡 什么是事件...
阻止JS事件冒泡传递（cancelBubble 、stopPropagation）
weixin_33969116的博客
05-22 143
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="Test.WebForm1" %> <!DOCTYPE html><html><head><title> 阻止JS事件冒泡传递（cancelBubble 、stopP...
JavaScript中阻止事件冒泡与默认行为的技巧
学习和分享
11-24 692
事件冒泡是一种事件传播机制，当一个元素上的事件被触发时，该事件会从最内层的元素（事件目标）开始，向外层元素传播，直到根元素（通常是。在JavaScript中，可以通过调用事件对象上的特定方法来阻止事件冒泡和事件的默认行为。需要注意的是，在某些旧版本的浏览器中（主要是IE8及更早版本），可能需要使用。但在现代浏览器中，推荐使用上述的标准方法。要阻止这些默认行为，可以调用事件对象的。很多HTML元素上的事件都有默认的行为。要阻止事件冒泡，可以调用事件对象的。来同时阻止事件冒泡和默认行为。来阻止事件冒泡，以及。
Javascript 阻止javascript事件冒泡，获取控件ID值
10-29
`，这将设置事件的`cancelBubble`属性为true，阻止事件继续冒泡。 2. **获取控件ID** 在JavaScript中，获取触发事件的控件ID是经常需要的操作，这可以帮助我们识别是哪个元素触发了事件。获取控件ID的方法因浏览器...
详解javascript事件冒泡
11-28
这个函数接收一个事件对象作为参数，通过检查`stopPropagation`是否存在来判断浏览器是否支持，然后相应地调用该方法或设置`cancelBubble`属性，从而阻止事件冒泡到更上层的元素。 理解事件冒泡机制对于编写高效的...
Jeecg AI应用开发平台v1.0.0首版发布，快速搭建AI知识库或AI聊天助手
JEECG官方博客
12-04 979
Jeecg-AI是一款基于大型语言模型和RAG技术的全栈式AI开发平台，支持快速构建和部署个性化AI应用。该平台提供AI知识库管理、流程编排、模型配置、向量库对接等功能，支持ChatGPT、DeepSeek等多种大模型，并可与业务系统深度集成。采用Vue3+Spring Boot技术栈，具备智能问答、文档处理、API生成等能力，相比Dify平台更注重低代码与业务集成。开发者可通过Docker一键部署或源码构建，实现智能应用的快速开发。
Vue 通用复选框组互斥 Hooks：兼容 Element Plus + Ant Design Vue
a3212768093的博客
12-02 875
本文介绍了一个通用的Vue Hooks useExclusiveCheckbox，用于实现复选框组的互斥选择功能。该Hooks兼容ElementPlus和AntDesignVue两大UI库，主要特点包括：跨UI库兼容、轻量无依赖、灵活配置互斥选项值、全场景适配和类型安全。核心逻辑通过对比新旧选中值数组，自动处理互斥选项与其他选项的切换关系。文章提供了完整代码和使用示例，分别演示了在ElementPlus和AntDesignVue中的实现方式，并解答了常见问题。该方案可显著提升开发效率，适用于各类需要互斥选择
推荐 | JoyAgent-JDGenie：开箱即用的端到端多智能体产品
最新发布
lpfasd123的博客
12-05 330
如果你在寻找一款真正可落地的多智能体产品，用来“搜索-分析-生成报告”、“数据问答与诊断”、“代码解释与图表生成”，同时希望易部署、易扩展、易二次开发——JoyAgent-JDGenie 是非常值得试用与推荐的选择。只需填好少量配置，即可获得端到端的流式体验与交付能力。
vue实现页面不断插入内容并且自动滚动功能
weixin_50606255的博客
12-04 280
我们在看视频时经常会看到黑客入侵别人电脑会在屏幕上显示一串代码，并且代码不断插入自动滚动，看起来很厉害的样子，现在就在此纪录实现此功能：
网络安全漏洞之React 框架分析
anquan2233的博客
12-04 1189
昨日爆出的 CVE-2025-55182，CVSS 10.0 满分严重漏洞，影响 React 19 及所有 Next.js 15/16 项目。核心问题是 React Server Components 的 Flight 协议存在不安全反序列化，无需任何认证，攻击者只需向 Server Actions 端点发送一个精心构造的 multipart 请求，即可实现远程代码执行（RCE）。目前已确认多个完整 0day 利用链（包括 vm.runInThisContext 在内），未修补实例基本等于已失陷。
ruoyi集成camunda实现bpmn在线设计器
xrl2012的专栏
12-03 1210
摘要： 本文介绍了如何在RuoYi-Vue2前端集成Camunda BPMN在线设计器，实现流程建模功能。通过npm安装bpmn-js等依赖包，配置vue.config.js解决转译和别名问题，并提供了测试页面代码示例。页面包含导入/导出XML/SVG、流程检查、部署等功能，支持BPMN流程设计器的初始化和基本操作。环境要求包括JDK 1.8+、MySQL 5.7+、Node 23+等。完整方案可参考若依工作流。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值