document阻止冒泡失败

最新推荐文章于 2022-11-15 16:30:45 发布
最新推荐文章于 2022-11-15 16:30:45 发布
阅读量681 收藏
点赞数 1
分类专栏： javascript/es6/es7
本文探讨了事件冒泡机制，解释了为何直接在document上绑定事件会触发所有元素的事件响应，以及如何正确地使用阻止冒泡来避免不必要的事件处理。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

document阻止冒泡失败：
事件冒泡是子元素优先触发，父级元素后触发，最后冒泡到document元素。
如果你直接给document绑定事件，那肯定你点谁都会执行事件，你这里的阻止冒泡并没有什么意义。

react 八千字长文深入了解react合成事件底层原理，原生事件中阻止冒泡是否会阻塞合成事件？
行星飞行的博客
07-06 748
在前面两篇文章中，我们花了较大的篇幅介绍的方法，在介绍同步异步时提到，在合成事件中对于更新都是异步，但在原生事件中更新却是同步，这说明在合成事件处理上必定与原生事件存在部分差异，那么本篇文章就来着重介绍中的合成事件，在文章开始之前我们先罗列部分问题：在文章开始前，大家可以先自行思考这些问题，假设这些在面试中遇到，你能回答多少呢？那么本文开始。虽然本文的核心重点是介绍的合成事件，但文章开头既然给了合成事件与原生事件相关对比问题，因此了解原生事件是有必要的，考虑到可能有同学对此类知识存在遗忘，这里做个简单复习。
JavaScript中事件冒泡与捕获错误的解决方法
最新发布
shejizuopin的博客
05-06 671
维度最佳实践事件处理优先使用事件委托，避免直接绑定大量事件冒泡控制仅在必要时阻止冒泡，避免滥用导致逻辑混乱错误捕获使用try-catch处理同步错误，处理异步错误，全局error事件兜底性能优化对动态元素使用事件委托，减少DOM操作兼容性跨浏览器兼容需处理和事件冒泡与捕获是JavaScript事件系统的核心特性，但也可能成为错误的主要来源。通过开发者工具调试事件委托优化同步/异步错误捕获三大策略，开发者可系统性规避常见问题。过度阻止事件冒泡会破坏组件独立性，而忽略错误处理会导致用户体验灾难。
清除冒泡
weixin_34390105的博客
11-08 129
function clearEventBubble(evt){ if(evt.stopPropagation){ evt.stopPropagation(); } else{ evt.cancelBubble=true; } if(evt.preventDefault){ evt.preventDefault(); } else{ ...
JS阻止冒泡方法
lj830723的博客
03-13 303
JS事件流其中一种是冒泡事件，当一个元素被触发一个事件时，该目标元素的事件会优先被执行，然后向外传播到每个祖先元素，恰如水里的一个泡泡似的，从产生就一直往上浮，到在水平面时，它才消失。在这个过程中，如果你只希望事件发生在目标元素，而不想它传播到祖先元素上去，那么你需要在“泡泡”离开对象之前刺破它。 　　我在文档中写了一个层，点击以外隐藏该层，并为之设置了简单的样式，现在我希望点击该层以外的地...
阻止冒泡无效问题
weixin_45162984的博客
12-07 1660
经常遇到用js渲染的div，绑定事件需要用到事件委托，此时阻止冒泡不能使用在时间委托中实现，比如 // 这种方法无效，阻止不了冒泡 $(document).on('click','#id',function(event) { event = event || window.event; event.stopPropagation(); }) 正确的写法是 // 这是正确写法 $(document).on('click',function() { $('#id').on('click',functio
js阻止冒泡问题
qq_39990827的博客
05-10 364
如果阳普医疗阻止冒泡： 运行页面，点击“点击我”,会依次弹出：我是最里层---->我是中间层---->我是最外层 ---->然后再链接到XX. 这就是事件冒泡，本来我只点击ID为hr_three的标签，但是确执行了三个alert操作。 事件冒泡过程（以标签ID表示）：hr_three----> divTwo----> divOne 。从最里层冒泡到最外层。 阻止冒泡：...
document绑定click事件无效_DOM事件模型及不同leval的比较和事件冒泡事件委托
weixin_39657575的博客
02-03 627
html中的事件写法与DOM的区别html里写事件函数要写调用的：<script> function print(){ console.log(‘hi’) } </script> <button id=”x” onclick=”print”>A</button> <button id=”y” onclick=”print()”>B...
js阻止冒泡和默认事件（默认行为）详解
10-21
在这里，阻止冒泡是为了防止按钮点击事件冒泡到document上导致盒子再次消失。而按钮点击事件的处理函数返回`false`，既可以阻止冒泡也可以阻止默认行为，这是一种简便写法，仅适用于支持此行为的浏览器。 综上所述...
IE及IE6浏览器中判断JS文件加载成功失败的方法
12-08
// 阻止错误冒泡 }; // 设置超时处理，以防VBScript加载未触发错误 setTimeout(function() { vbs.parentNode.insertBefore(vbs, vbs.nextSibling); }, 0); } else { // 对于非IE或高于IE8的浏览器，可以...
vue项目第一次打开页面，第一次不能登录，第二次以后正常的问题（阻止事件默认行为、冒泡、捕获）
qq_33911541的博客
11-15 1469
vue项目第一次打开页面，第一次不能登录，第二次以后正常的问题（阻止事件默认行为、冒泡、捕获）
阻止事件冒泡
这个博客记录我的成长。(专注前端开发，ehcarts图表开发，接定制)，有需要请站内私信。
06-13 653
阻止事件冒泡的方式 行内绑定的点击事件和js绑定的点击事件阻止冒泡是不同的。 行内绑定的需要 通过window.event.cancelBubble = true 来阻止。 js绑定的无论哪一种写法需要通过e.stopPropagation() 来阻止。 <!DOCTYPE html> <html lang="en"> <he...
jq阻止事件冒泡（点击子级不触发父级）的两种方法
qq_35181466的博客
06-19 5461
方法1 function addFocus() { var e=window.event || arguments.callee.caller.arguments[0]; e.preventDefault(); e.stopPropagation() ; } 方法2 $("#addFocus").click(function(event){ event.stop...
阻止冒泡事件
HusKiy的博客
09-26 122
<div class="div">我是div <p class="p1">我是P1 <p class="p2">我是p2</p> </p> </div> <script> div=document.getElementsByClassName("div")[0]; p1=document.getElementsByClassName.
JS基础-18-addEventListener和冒泡
HZ~的博客
08-03 1356
绑定事件的两种方式/DOM事件的级别 方式一：onclick element.onclick = function () { } 举例： <body> <button>点我</button> <script> var btn = document.getElementsByTagName("button")[0]; //这种事件绑定的方法容易被层叠。 btn.onclick = function () {
JS——事件冒泡与阻止事件冒泡
Bonsoir777的博客
08-25 4101
本文主要介绍JS中有关事件流的相关知识点
阻止事件冒泡方法
热门推荐
weixin_57157220的博客
07-09 1万+
阻止事件冒泡方法 1.event.stopPropagation()方法 这是阻止事件的冒泡方法，不止事件向document上蔓延，但是默认事件任然会执行，当你调用这个方法的时候，如果点击一个连接，这个连接仍然会被打开 2.event.preventDefault()方法 这是阻止默认事件的方法，调用此方法时，链接不会被打开，但是会发生冒泡，冒泡会传递到上一层的父元素 3.return false; 这个方法比较暴力，他会同时阻止事件冒泡也会阻止默认事件，不仅阻止了事件往上冒泡，而且阻止了事件本身
关于js阻止冒泡时的一些坑
大明明
08-08 1836
前提：这两天在用datatable做列表，点击列表行显示详情，就会涉及到阻止冒泡的问题，话不多说直接上代码，大概思路就是先获取到事件，然后阻止它。 //得到事件 function getEvent() { if (window.event) { return window.event; } func = getEvent.caller; while (func != null) {...
JS事件冒泡、停止冒泡、addEventListener--实例演示
weixin_34185364的博客
09-01 336
问题： <div class='item' id='outer' onclick="alert('outer')"> <div class='item' id='inner' onclick="alert('inner');"> <div class='item' id='core' onclick="alert('core')"> ...
on绑定阻止冒泡失败
dengxin9394的博客
06-12 132
使用zepto库，有如下dom 1 <div id="J_parent"> 2 <a href="#"> 3 <span>点我有惊喜</span> 4 </a> 5 </div> View Code 以上div内的节点是后续生成...
不会冒泡的事件有哪些？
04-01
<think>嗯，用户问的是“不会冒泡的事件有哪些？”。首先，我需要回忆一下DOM事件流中的冒泡机制。通常，事件分为捕获阶段、目标阶段和冒泡阶段。大多数事件默认会冒泡，但有些特定的事件不会。 首先，我得确定哪些事件是不会冒泡的。记得像focus、blur这些事件是不冒泡的，因为它们在表单元素处理焦点时通常不需要向上传递。另外，load事件也不会冒泡，比如图片加载完成，只在目标元素触发。还有mouseenter和mouseleave，这两个事件的设计是为了避免在鼠标移动时频繁触发父元素的事件，所以它们不冒泡。类似的还有resize事件，当窗口大小变化时只在window对象触发，不冒泡。还有scroll事件，滚动元素时只在自身触发，不向上传播。 然后，需要确认这些事件的正确性，避免错误信息。比如，是否abort事件（资源加载中止）和error事件（加载失败）也不冒泡。我记得这些确实不会冒泡，因为它们的处理通常需要在目标元素上直接处理，不需要父级干预。 接下来，考虑用户可能的实际应用场景。用户可能是前端开发者，在处理事件委托时需要注意这些不会冒泡的事件，无法通过父元素代理。比如，如果用户试图在父元素上监听focus事件，可能无法捕获子元素的焦点变化，这时候需要使用focusin事件，因为focusin是冒泡的。 另外，可能需要提到一些现代浏览器中的变动，比如虽然DOM规范中某些事件不冒泡，但有些浏览器可能有不同的实现。但通常来说，标准中规定的不冒泡事件是通用的。 最后，整理这些事件，分门别类，给出清晰的例子和说明，帮助用户理解为什么这些事件不会冒泡，以及在实际开发中如何处理这些情况。确保回答结构清晰，先总述再分点，每类事件举例说明，可能的应用场景和解决方案。</think>在 DOM 事件模型中，大多数事件会**冒泡**（从触发元素向上传递到根节点），但以下事件默认**不会冒泡**，其传播仅停留在目标阶段： --- ### 一、常见不冒泡的事件类型 #### 1. **焦点相关事件** - **`focus`**：元素获得焦点时触发（如表单输入框被选中） - **`blur`**：元素失去焦点时触发 **替代方案**：若需冒泡行为，可用 `focusin`（冒泡版 focus）和 `focusout`（冒泡版 blur）。 #### 2. **资源加载事件** - **`load`**：资源加载完成（如 `<img>` 加载图片） - **`abort`**：资源加载中止（如用户取消图片加载） - **`error`**：资源加载失败（如脚本路径错误） #### 3. **鼠标进出事件** - **`mouseenter`**：鼠标进入元素区域 - **`mouseleave`**：鼠标离开元素区域 **对比**：`mouseover`/`mouseout` 会冒泡，但可能因频繁触发导致性能问题。 #### 4. **UI 状态事件** - **`resize`**：窗口或元素尺寸变化（仅在 `window` 或特定元素触发） - **`scroll`**：元素滚动时触发（仅限当前滚动元素） --- ### 二、验证方法 可通过简单代码验证事件是否冒泡： ```javascript document.addEventListener('focus', (e) => { console.log('冒泡的 focus 事件被捕获'); // 不会触发 }, true); // 使用捕获阶段监听 document.querySelector('input').addEventListener('focus', (e) => { console.log('目标元素的 focus 事件触发'); // 仅此处触发 }); ``` --- ### 三、开发注意事项 1. **事件委托限制** 无法通过父元素代理上述事件（如监听父容器的 `focus` 事件无效）。 2. **解决方案** - 改用冒泡替代事件（如 `focusin` 代替 `focus`） - 直接在目标元素绑定监听器 - 通过 `event.stopPropagation()` 主动阻止其他事件的冒泡干扰 --- ### 附：部分事件冒泡对照表 | 不冒泡事件 | 可冒泡替代事件 | |--------------------|--------------------| | `focus` | `focusin` | | `blur` | `focusout` | | `mouseenter` | `mouseover` | | `mouseleave` | `mouseout` | 理解事件冒泡特性可避免开发中的意外行为，提升事件处理精度。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值