e.stopPropagation()阻止冒泡

最新推荐文章于 2023-12-07 11:27:04 发布
最新推荐文章于 2023-12-07 11:27:04 发布
阅读量4.1k 收藏 2
点赞数 2
分类专栏： web前端

stopPropagation()函数用于阻止当前事件在DOM树上冒泡。

根据DOM事件流机制，在元素上触发的大多数事件都会冒泡传递到该元素的所有祖辈元素上，如果这些祖辈元素上也绑定了相应的事件处理函数，就会触发执行这些函数。

使用stopPropagation()函数可以阻止当前事件向祖辈元素的冒泡传递，也就是说该事件不会触发执行当前元素的任何祖辈元素的任何事件处理函数。

该函数只阻止事件向祖辈元素的传播，不会阻止该元素自身绑定的其他事件处理函数的函数。event.stopImmediatePropagation()不仅会阻止事件向祖辈元素的传播，还会阻止该元素绑定的其他(尚未执行的)事件处理函数的执行。

此外，由于live()函数并不是将事件处理函数直接绑定到自己身上，而是"委托"绑定到祖辈元素上，由祖辈元素来触发执行。live()函数会先一次性冒泡到文档的顶部，然后为符合条件的元素触发事件。因此，stopPropagation()函数无法阻止live事件的冒泡。

同样地，delegate()函数也是"委托事件函数"，只有事件冒泡传递到"受委托"的祖辈元素才会被触发执行。因此，stopPropagation()函数无法阻止该元素到"受委托"的祖辈元素之间的事件冒泡。

该函数属于jQuery的Event对象。

转载：http://www.365mini.com/page/jquery-event-stoppropagation.htm

张夏_keep
关注
专栏目录
javascript阻止事件冒泡和浏览器的默认行为
11-26
1.阻止事件冒泡,使成为捕获型事件触发机制. function stopBubble(e) { //如果提供了事件对象，则这是一个非IE浏览器 if ( e && e.stopPropagation ) //因此它支持W3C的stopPropagation()方法 e.stopPropagation(); else //否则，我们需要使用IE的方式来取消事件冒泡 window.event.cancelBubble = true; } 2.当按键后,不希望按键继续传递给如HTML文本框对象时,可以取消返回值.即停止默认事件默认行为. //阻止浏览器的默认行为 functi
利用jQuery的$.event.fix函数统一浏览器event事件处理
QC班长的博客
08-03 1080
function eventHandler(e)  {  var event = $.event.fix(e);  var elem = event.target;  alert('当前点击对象的标签名是:' + elem.tagName);  alert('当前点击按钮文本是:' + elem.value);  alert('pageX:' + event.pageX + ',pag
阻止事件e.stopPropagation()和e.preventDefault的区别
最新发布
z2000ky的博客
12-07 1529
这两个方法可以单独使用，也可以组合使用，具体取决于你的需求。用于阻止事件的传播，而。用于阻止事件的默认行为。
JS - e.preventDefault()与e.stopPropagation()
kelly0721的博客
02-10 2224
事件冒泡 e.stopPropagation()阻止事件冒泡 事件冒泡，就是字元素的onClick事件被触发时，会同时触发父元素的 onClick 事件 一般来讲，click事件的顺序应该是p -> div -> body -> html -> document 所以，以下代码的触发顺序是 children -> parent -> body 如果 e.st...
e.stopPropagation()
a785589446的博客
04-01 1992
1. 定义和用法 不再派发事件。 终止事件在传播过程的捕获、目标处理或起泡阶段进一步传播。调用该方法后，该节点上处理该事件的处理程序将被调用，事件不再被分派到其他节点。 2. 语法 event.stopPropagation() 3. 说明 　　该方法将停止事件的传播，阻止它被分派到其他 Document 节点。在事件传播的任何阶段都可以调用它。注意，虽然该方法不能阻止同一个...
zepto.js中tap事件阻止冒泡的实现方法
10-24
这是因为tap事件与click事件在浏览器处理上存在差异，click事件的stopPropagation()方法在zepto.js中通常能阻止冒泡，而tap事件则不能直接使用stopPropagation()来达到同样的效果。 为了解决tap事件冒泡的问题，...
jQuery中阻止冒泡事件的方法介绍
10-26
3. **兼容性函数**：对于那些不支持`event.preventDefault()`的旧版浏览器（主要是IE），可以使用以下函数来阻止冒泡： ```javascript function stopDefault(e) { if (e && e.preventDefault) { e....
阻止JavaScript事件冒泡传递（cancelBubble 、stopPropagation）
10-30
阻止JavaScript事件冒泡传递（cancelBubble 、stopPropagation） 在JavaScript事件处理机制中，事件冒泡传递是一个重要的概念。当一个元素触发某个事件时，该事件就会沿着DOM树向上传递，直到到达文档的根元素为止...
React冒泡和阻止冒泡的应用详解
11-19
在React开发中，事件处理是不可或缺的一部分，而事件冒泡和阻止冒泡是理解JavaScript事件模型的关键概念。事件冒泡是指事件从最深的节点开始，逐级向上传播到最外层节点的过程。在React中，由于其事件处理机制，理解...
e.stopPropagation()用法
m0_71099325的博客
09-26 196
例如,这段代码中,类名为closeBtn的div位于它的父级div里.给它加点击事件,要防止该事件不冒泡到它的父级div,就要用到。这样,点击类名为closeBtn的div,就关闭了它的父级div,而点它的父级div本身不会触发事件.
js禁止事件冒泡e.stopPropagation();
杨咩咩
06-14 1万+
事件冒泡：当点击一个按钮后，此事件会一直向上传递，称为事件冒泡。可能会对父类活根类型事件造成影响。 例如：点击【按钮】弹出一个框，点击空白处，弹框消失。由于【按钮】是向上传递的，点击后会同时触发 点击空白处弹框消失事件。 js禁止事件冒泡方法：在【按钮】的触发框事件种禁止冒泡e.stopPropagation(); $.('btn').on('click', function(e){ ...
事件（阻止事件传播、阻止默认事件、事件源对象、事件委托）
巧克力很苦的小博客
09-06 1158
阻止事件传播 阻止事件传播e.stopPropagation() 谷歌浏览器 阻止事件传播（冒泡阶段） var oBig = document.getElementById('big'); var oSmall = document.getElementById('small'); oBig.addEventListener('click',func...
消除点透事件（stopPropagation的妙用）
日常笔记/总结/系列知识梳理
03-27 2584
消除点透事件的具体代码如下： function stopEvent(){ var e=arguments.callee.caller.arguments[0]||event; if ( e && e.stopPropagation ) { e.stopPropagation(); } else{ ...
阻止事件冒泡 - e.stopPropagation()
一个小白，博文源于浏览各个大佬所得，感谢行业大佬们！
09-22 959
阻止事件冒泡 - e.stopPropagation()
e.preventDefault()与e.stopPropagation()的区别
热门推荐
xiaobing_hope的专栏
02-16 3万+
e.stopPropagation()阻止事件冒泡 border='1'> 冒泡事件测试 冒泡事件测试2 我们先看这段js代码： $('table').on('click', function (e) { alert('table alert!'); }); $('tr').on(
js e.stopPropagation()阻止冒泡事件和e.preventDefault()阻止默认行为的应用场景
PrimaryColor
01-27 2759
一、阻止冒泡事件。 示例图： 通常，在很多用户界面中，都经常出现如上图所示，点击列表的时候，进入这条数据的详情页面，点击编辑的时候，弹窗编辑这条数据的信息。但是呢，做完之后，发现点击编辑的时候不仅仅会打开弹窗并且还会跳转页面，也就是两个事件都触发了，这个时候我们就需要在点击编辑的时候，阻止事件继续往上派发。 代码： $('.toDetail').on('click',function(){ console.log('跳转详情页面'); }); $('.editDetail').on('
阻止冒泡 e.stopPropagation();
GoodLuck_wu5的博客
04-28 371
事件冒泡的案例： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-...
冒泡事件阻止的案例 e.stopPropagation()
brucehongsen的博客
05-06 472
案例： 效果图 代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> &lt
关于js中事件的event.stopPropagation()方法的理解与举例说明
zhizhan888的博客
12-22 1万+
这里有你想要的JavaScript事件的触发原理，stopPropagation()方法的使用，欢迎大家来讨论，一起相互学习，一起进步
e.stopPropagation()移动端
06-06
e.stopPropagation() 是 JavaScript 中的一个方法，用于阻止事件冒泡。在移动端，当用户点击某个元素时，会触发该元素上的 click 事件，并且该事件会一直向上冒泡，直到到达文档根元素。如果在某个父元素上绑定了 ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值