开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

js 阻止冒泡

在 JavaScript 中，事件冒泡是指事件从最具体的元素（事件目标）开始触发，然后向上传播到较不具体的元素（例如：从按钮到文档）。有时候，我们需要阻止这种事件冒泡的行为。

基础概念

事件冒泡：当一个事件发生在某个元素上时，它会首先在这个元素上执行处理函数，然后逐级向上传播到父元素，直到传播到 document 对象。

阻止冒泡的方法

在 JavaScript 中，可以使用 event.stopPropagation() 方法来阻止事件冒泡。

示例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>阻止冒泡示例</title>
    <style>
        .outer {
            padding: 50px;
            background-color: lightblue;
        }
        .inner {
            padding: 50px;
            background-color: lightgreen;
        }
    </style>
</head>
<body>
    <div class="outer" id="outer">外部元素
        <div class="inner" id="inner">内部元素</div>
    </div>

    <script>
        document.getElementById('outer').addEventListener('click', function(event) {
            console.log('外部元素被点击');
        });

        document.getElementById('inner').addEventListener('click', function(event) {
            console.log('内部元素被点击');
            event.stopPropagation(); // 阻止事件冒泡
        });
    </script>
</body>
</html>

在这个示例中，当点击内部元素时，控制台会输出 "内部元素被点击"，但不会输出 "外部元素被点击"，因为 event.stopPropagation() 阻止了事件冒泡。

优势

避免不必要的事件处理：有时候，事件冒泡会导致父元素的事件处理函数被触发，而这些处理函数可能并不需要在子元素被点击时执行。
提高性能：减少不必要的事件处理可以提高页面的性能。
更好的用户体验：通过控制事件的传播，可以实现更精确的用户交互。

应用场景

模态框：在点击模态框外部关闭模态框时，需要阻止点击事件冒泡到文档，以避免意外关闭模态框。
下拉菜单：点击下拉菜单项时，需要阻止事件冒泡到父元素，以避免触发父元素的事件处理函数。
表单验证：在表单验证时，点击提交按钮后，可能需要阻止事件冒泡以避免触发其他不必要的操作。

注意事项

不要滥用：虽然阻止冒泡可以解决一些问题，但滥用可能会导致代码难以维护和理解。
兼容性：event.stopPropagation() 在现代浏览器中都有很好的支持，但在一些旧版本的浏览器中可能需要进行兼容性处理。

通过合理使用 event.stopPropagation()，可以更好地控制事件的传播，提高代码的可维护性和用户体验。

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

JS事件冒泡及阻止

事件冒泡及阻止当一个元素接收到事件的时候，会把他接收到的事件传给自己的父级，一直到window，当然其传播的是事件，绑定的执行函数并不会传播，如果父级没有绑定事件函数，就算传递了事件，也不会有什么表现...DOCTYPE html> JS事件冒泡及阻止 div{...DOCTYPE html> JS事件冒泡及阻止 li{...有时候我们并不希望事件冒泡而去执行上级节点绑定的事件，这时候就需要阻止事件的冒泡，w3c的方法是e.stopPropagation()，IE则是使用 window.event.cancelBubble...阻止冒泡并不能阻止对象默认行为，例如submit按钮被点击后会提交表单数据，需使用e.preventDefault();阻止默认行为，IE则是window.event.returnValue = false

6.6K2 0

JS示例36-如何阻止事件冒泡

block'; var oEvent = ev || event; oEvent.cancelBubble = true; // 取消事件冒泡

4.8K2 0

vue.js中实现阻止事件冒泡

当父子元素中都有点击事件的时候，为了让触发子元素中的事件时，不去触发父元素中的事件，可以在子元素事件中添加stop来阻止事件冒泡。....stop 是阻止冒泡行为,不让当前元素的事件继续往外触发,如阻止点击div内部事件,触发div事件 .prevent 是阻止事件本身行为,如阻止超链接的点击跳转,form表单的点击提交 .self 是只有是自己触发的自己才会执行...,如果接受到内部的冒泡事件传递信号触发,会忽略掉这个信号 .capture 是改变js默认的事件机制,默认是冒泡,capture功能是将冒泡改为倾听模式 .once 是将事件设置为只执行一次,如 .click.prevent.once...阻止click事件冒泡(防止触发另一个事件)的方法使用vue阻止子级元素的click事件冒泡。...方法二可以自己写个阻止冒泡事件然后在发生冒泡的元素中调用这个事件 @click="_stopPropagation($event)" methods：{ _stopPropagation

6.6K1 0

uniapp阻止navigator冒泡

height: 200rpx; background-color: #e8e8e8; } 这里我们点击内层的navigator会触发外层的@tap事件我们可以加一个catchtap即可阻止冒泡

2.6K2 0

uniapp阻止事件冒泡

我们这时需要给子元素加上阻止事件冒泡就行了 //子元素方法 ...@click.stop 就是阻止事件冒泡的写法未经允许不得转载：肥猫博客 » uniapp阻止事件冒泡

3.6K2 0

Vue 阻止事件冒泡

Vue 阻止事件冒泡 by:授客 QQ：1033553122 开发环境 Win 10 element-ui "2.8.2" Vue 2.9.6 事件冒泡简介如下图，当我们点击页面某个元素时，会产生点击事件...，事件由外到内，逐层递进（事件捕获阶段，途中的1->2->3->4），当目标元素捕捉到目标事件时，会响应事件，并由内到外，逐层往外传递(事件冒泡阶段，图中的4->5->6->7)，这便是事件冒泡。...结论综合实验1,2,3可知，如果想阻止哪个元素的事件冒泡（即事件只针对该元素有效），只要给该元素的事件增加.stop修饰符即可。...常见的屏蔽右键默认菜单 .passive 每次事件产生，浏览器都会去查询一下是否调用了preventDefault阻止该次事件的默认动作,为事件设置.passive修饰符就是为了告诉浏览器，不用查询了，...我们没用preventDefault阻止默认动作。

3.2K1 0

js 停止事件冒泡阻止浏览器的默认行为（阻止a标签跳转）

在前端开发工作中，由于浏览器兼容性等问题，我们会经常用到“停止事件冒泡”和“阻止浏览器默认行为”。...停止事件冒泡 JavaScript代码 //如果提供了事件对象，则这是一个非IE浏览器 if ( e && e.stopPropagation ) //因此它支持W3C的stopPropagation(...)方法 e.stopPropagation(); else //否则，我们需要使用IE的方式来取消事件冒泡 window.event.cancelBubble = true; return false...; 阻止浏览器的默认行为 JavaScript代码　　　　　　　　　　//编辑文章时阻止a标签跳转 $("#final_content").find("a").click...IE浏览器 if ( e && e.preventDefault ) { //阻止默认浏览器动作

5.9K4 0

JS事件流、事件冒泡、阻止冒泡、事件捕获（一看就懂）

讲事件冒泡、阻止冒泡和事件捕获之前先说说什么是事件流，这样会更容易明白一、事件和事件流 1、什么是事件事件是可以被 JavaScript 侦测到的行为。...一个完整的JS事件流是从window开始，最后回到window的一个过程。事件流被分为三个阶段(1~ 5)捕获过程、(5~ 6)事件触发过程、(6~ 10)冒泡过程。...三、阻止冒泡 1、JS阻止事件冒泡我们用 e.stopPropagation() 这个方法添加到某事件函数里的末尾，就可以做到阻止冒泡事件。...} else { e.cancelBubble = true; //IE阻止冒泡方法 } } 在child（区域①）...2、JQ阻止事件冒泡 jq阻止事件冒泡就简单了，直接在事件函数里面添加 return false; 就行了。

16.6K6 4

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

阻止冒泡 js" type="text/javascript"> ...function (e) { alert("我是div"); }) //e.stopPropagation();就是阻止冒泡...因为已经被阻止了。...在上面的函数中，先弹出 “我是li”然后弹出“我是ul”，最后弹出“我是div” 一层一层的冒泡，而阻止冒泡的方式就是调用事件的对象来调用stopPropagation()方法。

2.2K3 0

事件委托与阻止冒泡

简单说下事件委托与阻止冒泡 html: 旧金山奥兰多西雅图 js...("父元素ul被点击"); }); $("ul[data-type='cityPick']").on('click','li',function(e){ e.stopPropagation();//阻止冒泡...alert("子元素li被点击"); }); 加一句阻止冒泡即可。

2K10 0

Echarts鼠标事件阻止冒泡

类似弹窗遮罩的实现方式，我们通常会在容器元素上绑定一个点击事件，然后设置里面的子元素的点击事件阻止冒泡即可。...main>div'); oDiv.onclick = function() { //body ... } 二、解决方案探索按照上面的分析，接下来我们只需要对扇形的点击事件做阻止冒泡就好了...相当于是要阻止饼图点击事件的冒泡。...关联文章： Echarts柱状图点击事件（阻止冒泡）采用myChart.off('click')。网路上输入echarts 阻止冒泡，出来很多这个解决方案的文章。...echarts鼠标事件阻止冒泡采用param.event.event.stopPropagation()。这也是我一开始要采用的阻止冒泡方法，最初也是不知道怎么获取window.event。

4.7K3 0

阻止冒泡和阻止默认事件的兼容写法

//阻止冒泡的兼容性写法 function stopBubble(event){ var e=arguments.callee.caller.arguments[0]||event; if...e.stopPropagation() }else if(window.event){ window.event.cancelBubble=true; } } //阻止浏览器默认行为的兼容性写法...function stopDefault(event){ var e=arguments.callee.caller.arguments[0]||event; //阻止默认浏览器动作(...W3C) if(e&&e.preventDefault){ e.preventDefault(); }else{ //IE中阻止函数默认动作的方式

3.1K8 1

js 停止事件冒泡阻止浏览器的默认行为

在前端开发工作中，由于浏览器兼容性等问题，我们会经常用到“停止事件冒泡”和“阻止浏览器默认行为”。...浏览器默认行为：在form中按回车键就会提交表单；单击鼠标右键就会弹出context menu. a标签 1..停止事件冒泡 JavaScript代码 1 //如果提供了事件对象，则这是一个非IE浏览器...7 window.event.cancelBubble = true; 8 return false; 2.阻止浏览器的默认行为 JavaScript代码 1 element.onclick =...return false; } 但是在使用return false时必须注意： 1、jQuery有自己的事件处理层，也对处理程序做了封装，如果事件处理程序返回false，事件冒泡和浏览器默认事件都会被阻止...2、使用原生javaScript，在事件处理程序中返回false只会阻止浏览器默认行为，而事件冒泡依然存在。 3、浏览器默认行为和事件冒泡是相互独立的。阻止事件冒泡不会影响默认行为，反之亦然。

5.3K12 0

javascript 怎么阻止事件冒泡

1.停止事件冒泡 //如果提供了事件对象，则这是一个非IE浏览器 if (e && e.stopPropagation) { //因此它支持W3C的stopPropagation...()方法 e.stopPropagation(); } else { //否则，我们需要使用IE的方式来取消事件冒泡 window.event.cancelBubble...= true; return false; } 2.阻止事件默认行为。...//如果提供了事件对象，则这是一个非IE浏览器 if (e && e.preventDefault) { //阻止默认浏览器动作(W3C) e.preventDefault...(); } else { //IE中阻止函数器默认动作的方式 window.event.returnValue = false;

2.7K1 0

jquery 事件冒泡、阻止事件冒泡 - event.stopPropagation()

事件冒泡机制有时候是不需要的，需要阻止掉，通过 event.stopPropagation() 来阻止阻止上面点击黄色div的click()冒泡传递 ?...设置了阻止冒泡传递之后，那么click()事件就不会传递到father和grandfather的事件，所以只有一个alert()弹出。完整事件冒泡示例代码 js...阻止默认行为阻止表单提交 $('#form1').submit(function(event){ event.preventDefault(); }) 这个是阻止表单提交的默认行为，这个行为和阻止冒泡可以合并一起写...使用return false;其实就是使函数传递false的值，从而阻止冒泡传递，阻止函数继续执行。

6.1K4 1

as3.0中如何阻止事件冒泡?

as3.0中的事件冒泡机制有时候会很烦人，比如一个Sprite(方便下文描述就命名为Container吧)把另一外Sprite(称为Child吧)做为子元素套进来以后，如果两个Sprite都注册了Mouse_Down...事件，要想在Child上点击鼠标时系统只响应Child的Mouse_Down事件，默认是不行的，因为事件冒泡会让Container也响应Mouse_Down事件，示例代码： package { import...} } 鼠标点击最小的矩形后，输出如下： _sub_child.MOUSE_DOWN _child.MOUSE_DOWN _container.MOUSE_DOWN 相当于点一个，触发了三个，要想阻止事件冒泡...sub_child.MOUSE_DOWN_2 _sub_child.MOUSE_DOWN_1 小结：如果某对象的一个事件同时添加多个监听，stopPropagation将把该事件注册的所有监听处理函数执行完后，再阻止该事件继续向上冒泡...；而stopImmediatePropagation方法将本次处理函数执行完后就立即阻止事件继续向上冒泡(即同一事件的其它监听函数将不会执行)。

1.6K6 0

微信小程序阻止事件冒泡

“ 微信小程序怎么阻止事件冒泡呢”01微信小程序阻止事件冒泡将子类的点击事件bindtap改为用catchtap 点击 02uniapp阻止事件冒泡将子类的点击事件@click写成@click.stop利用vue的事件修饰符stop阻止单击事件继续传播 -->

2.9K2 1

jQuery阻止冒泡和HTML默认操作

，这样就需要一些jQuery的的方法阻止冒泡和默认的事件了。...可以通过以下三种方法做到不同程度的阻止。 ...return false 在事件的处理中，可以阻止默认事件和冒泡事件。 ...event.preventDefault()在事件的处理中，可以阻止默认事件但是允许冒泡事件的发生。 ...event.stopPropagation()在事件的处理中，可以阻止冒泡但是允许默认事件的发生。

2.2K5 0

jquery - 页面弹框 - 阻止事件冒泡示例

DOCTYPE html> js...解决#btn的事件冒泡，使用return false; ? 在阻止了#btn按钮的click()事件冒泡到$(document)之后，那么弹框就可以正常显示了。...这个思路不涉及事件冒泡的阻止，但是属于同一个click()方法的阻止，因为点击$(document)的click()事件应该不会冒泡到它下面的元素.pop，不过可以在这里验证一下。...在这个验证的过程中，更加确认了刚才在.pop使用return false;的确是用来阻止click()的冒泡至$(document)的。...DOCTYPE html> js

3.3K1 0

JS 阻止页面滚动

在升级到 ios11.3 系统后，阻止页面滚动的代码 e.preventDefault 代码失效了。...document.body.addEventListener('touchmove', function (e) { e.preventDefault(); //阻止默认的处理方式(阻止下拉滑动的效果...：https://www.cnblogs.com/jesse131/p/4888857.html Chrome 默认的事件监听参数 image.png useCapture:false 表示事件采用冒泡机制...所以 Safari 默认是不会阻止滚动的。通过 e.preventDefault(); 阻止默认的下拉滑动的效果，通过添加 passive:false 参数来兼容各个浏览器。...即可实现阻止移动页面滚动的功能。

23.1K5 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭