e.stopPropagation()用法

CodingRain

已于 2023-09-28 15:13:00 修改

阅读量211

点赞数

文章标签： javascript 开发语言 jquery 前端前端框架

于 2023-09-26 17:44:55 首次发布

本文链接：https://blog.csdn.net/m0_71099325/article/details/133318025

版权

本文解释了JavaScript中如何通过`.closeBtn`点击事件防止事件冒泡到父级div，使用`e.stopPropagation()`方法实现点击closeBtn时仅关闭其自身，而不影响父级元素的行为。

摘要由CSDN通过智能技术生成

$(".closeBtn").click(function (e) {
     e.stopPropagation();
     $(this).parent().hide();
})

例如,这段代码中,类名为closeBtn的div位于它的父级div里.给它加点击事件,要防止该事件不冒泡到它的父级div,就要用到

e.stopPropagation();

这样,点击类名为closeBtn的div,就关闭了它的父级div,而点它的父级div本身不会触发事件.

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

CodingRain

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

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

1083

function eventHandler(e) { var event = $.event.fix(e); var elem = event.target; alert('当前点击对象的标签名是:' + elem.tagName); alert('当前点击按钮文本是:' + elem.value); alert('pageX:' + event.pageX + ',pag

1 条评论您还未登录，请先登录后发表或查看评论

阻止事件e.stopPropagation()和e.preventDefault的区别

最新发布

z2000ky的博客

12-07

1635

这两个方法可以单独使用，也可以组合使用，具体取决于你的需求。用于阻止事件的传播，而。用于阻止事件的默认行为。

JS - e.preventDefault()与e.stopPropagation()

kelly0721的博客

02-10

2234

事件冒泡 e.stopPropagation()阻止事件冒泡事件冒泡，就是字元素的onClick事件被触发时，会同时触发父元素的 onClick 事件一般来讲，click事件的顺序应该是p -> div -> body -> html -> document 所以，以下代码的触发顺序是 children -> parent -> body 如果 e.st...

e.stopPropagation()

a785589446的博客

04-01

1995

1. 定义和用法不再派发事件。终止事件在传播过程的捕获、目标处理或起泡阶段进一步传播。调用该方法后，该节点上处理该事件的处理程序将被调用，事件不再被分派到其他节点。 2. 语法 event.stopPropagation() 3. 说明　　该方法将停止事件的传播，阻止它被分派到其他 Document 节点。在事件传播的任何阶段都可以调用它。注意，虽然该方法不能阻止同一个...

return false;和e.preventDefault();的区别

09-05

如果你想同时阻止事件冒泡，你需要使用 `e.stopPropagation();` 与 `e.preventDefault();` 结合。所以，`return false;` 实际上相当于： ```javascript function(e) { e.preventDefault(); e.stopPropagation(); ...

js中的preventDefault与stopPropagation详解

10-26

因此，这两个方法可以结合使用，以更精确地控制事件处理流程。事件代理是一种利用事件冒泡的优化技术，它允许我们在父元素上设置一个事件监听器，来处理子元素的事件。这样可以减少事件监听器的数量，提高性能。在...

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

10-30

在doSomething函数中，我们使用了cancelBubble和stopPropagation方法来阻止事件冒泡传递。我们可以通过观察结果来了解事件冒泡传递的机制。例如，当我们点击child1元素时，会alert出“child1”，然后alert出...

js(冒泡)中的preventDefault和stopPropagation.doc

02-27

在IE浏览器中，通常使用`e.cancelBubble = true`来阻止事件冒泡，而在其他现代浏览器中，则使用`e.stopPropagation()`。 ### 总结通过上述分析，我们可以看出`preventDefault`和`stopPropagation`这两个方法虽然...

js禁止事件冒泡e.stopPropagation();

杨咩咩

06-14

1万+

事件冒泡：当点击一个按钮后，此事件会一直向上传递，称为事件冒泡。可能会对父类活根类型事件造成影响。例如：点击【按钮】弹出一个框，点击空白处，弹框消失。由于【按钮】是向上传递的，点击后会同时触发点击空白处弹框消失事件。 js禁止事件冒泡方法：在【按钮】的触发框事件种禁止冒泡e.stopPropagation(); $.('btn').on('click', function(e){ ...

事件（阻止事件传播、阻止默认事件、事件源对象、事件委托）

巧克力很苦的小博客

09-06

1166

阻止事件传播阻止事件传播e.stopPropagation() 谷歌浏览器阻止事件传播（冒泡阶段） var oBig = document.getElementById('big'); var oSmall = document.getElementById('small'); oBig.addEventListener('click',func...

消除点透事件（stopPropagation的妙用）

日常笔记/总结/系列知识梳理

03-27

2599

消除点透事件的具体代码如下： function stopEvent(){ var e=arguments.callee.caller.arguments[0]||event; if ( e && e.stopPropagation ) { e.stopPropagation(); } else{ ...

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(

阻止事件冒泡 - e.stopPropagation()

一个小白，博文源于浏览各个大佬所得，感谢行业大佬们！

09-22

964

阻止事件冒泡 - e.stopPropagation()

js e.stopPropagation()阻止冒泡事件和e.preventDefault()阻止默认行为的应用场景

PrimaryColor

01-27

2771

一、阻止冒泡事件。示例图：通常，在很多用户界面中，都经常出现如上图所示，点击列表的时候，进入这条数据的详情页面，点击编辑的时候，弹窗编辑这条数据的信息。但是呢，做完之后，发现点击编辑的时候不仅仅会打开弹窗并且还会跳转页面，也就是两个事件都触发了，这个时候我们就需要在点击编辑的时候，阻止事件继续往上派发。代码： $('.toDetail').on('click',function(){ console.log('跳转详情页面'); }); $('.editDetail').on('

阻止冒泡 e.stopPropagation();

GoodLuck_wu5的博客

04-28

374

事件冒泡的案例： <!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

473

案例：效果图代码 <!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

e.stopPropagation、e.preventDefault的用法与区别

qq_24917475的博客

06-10

681

1、e.stopPropagation() 阻止任何父事件被执行 <div> this is a div element; <p> this is a p element; <span>this is a span element;</span> </p> </div> <script> $("span").c...

关于js中事件的event.stopPropagation()方法的理解与举例说明

zhizhan888的博客

12-22

1万+

这里有你想要的JavaScript事件的触发原理，stopPropagation()方法的使用，欢迎大家来讨论，一起相互学习，一起进步

// draggable.js import { onMounted, onBeforeUnmount } from 'vue' export default { mounted(el) { console.log('el',el) el.setAttribute('draggable', true) let startX, startY, initialLeft, initialTop, currentX, currentY const onDragStart = (e) => { console.log('e',e.preventDefault()) e.stopPropagation() // e.preventDefault() startX = e.clientX || e.touches[0].clientX startY = e.clientY || e.touches[0].clientY initialLeft = el.offsetLeft initialTop = el.offsetTop el.classList.add('dragging') } const onDrag = (e) => { e.stopPropagation() currentX = (e.clientX || e.touches[0].clientX) - startX currentY = (e.clientY || e.touches[0].clientY) - startY el.style.left = `${initialLeft + currentX}px` el.style.top = `${initialTop + currentY}px` } const onDragEnd = (e) => { e.stopPropagation() el.classList.remove('dragging') } el.addEventListener('dragstart', onDragStart) el.addEventListener('drag', onDrag) el.addEventListener('dragend', onDragEnd) el.addEventListener('touchstart', onDragStart) el.addEventListener('touchmove', onDrag) el.addEventListener('touchend', onDragEnd) onMounted(() => { el.classList.add('draggable') }) onBeforeUnmount(() => { el.removeEventListener('dragstart', onDragStart) el.removeEventListener('drag', onDrag) el.removeEventListener('dragend', onDragEnd) el.removeEventListener('touchstart', onDragStart) el.removeEventListener('touchmove', onDrag) el.removeEventListener('touchend', onDragEnd) el.classList.remove('draggable') el.classList.remove('dragging') }) } } 为什么拖拽时会出现虚影,残影, 怎么解决这个问题

05-27

e.stopPropagation(); e.dataTransfer.setData('text/plain', ''); // 阻止浏览器默认影像 startX = e.clientX || e.touches[0].clientX; startY = e.clientY || e.touches[0].clientY; initialLeft = el....