首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

JS事件冒泡及阻止

事件冒泡及阻止 当一个元素接收到事件的时候,会把他接收到的事件传给自己的父级,一直到window,当然其传播的是事件,绑定的执行函数并不会传播,如果父级没有绑定事件函数,就算传递了事件,也不会有什么表现...事件冒泡的原因是事件源本身可能没有处理事件的能力,即处理事件的函数并未绑定在该事件源上。它本身并不能处理事件,所以需要将事件传播出去,从而能达到处理该事件的执行函数。...DOCTYPE html> JS事件冒泡及阻止 div{...DOCTYPE html> JS事件冒泡及阻止 li{...有时候我们并不希望事件冒泡而去执行上级节点绑定的事件,这时候就需要阻止事件的冒泡,w3c的方法是e.stopPropagation(),IE则是使用 window.event.cancelBubble

6.5K20
您找到你想要的搜索结果了吗?
是的
没有找到

js addEventListener事件捕获与冒泡,第三个参数详解,阻止事件传播

结论 element.addEventListener(event, function[, useCapture]) event:事件名称,如click function:指定要事件触发时执行的函数,可以传入事件参数...默认false:在冒泡阶段执行指定事件 true:在捕获阶段执行事件 event.stopPropagation():阻止事件传播,用于function(event){}中 图解捕获与冒泡 实例:aa...当点击cc时,按cc>bb>aa依次捕获,再按aa>bb>cc依次冒泡;因为第三个参数(useCapture)默认为false,所以在冒泡阶段执行各自click函数,结果如下: cc bb aa 当js...当js修改为 function print(e){ e.stopPropagation();//执行完此函数后,该事件不再继续传播 console.log(this.id);...cc.addEventListener('click',print,true); 再点击cc时,捕获cc,执行cc的click函数, 因为print函数中有e.stopPropagation(),所以执行完该函数后,click事件不再传播

2.6K10

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

当父子元素中都有点击事件的时候,为了让触发子元素中的事件时,不去触发父元素中的事件,可以在子元素事件中添加stop来阻止事件冒泡。....stop 是阻止冒泡行为,不让当前元素的事件继续往外触发,如阻止点击div内部事件,触发div事件 .prevent 是阻止事件本身行为,如阻止超链接的点击跳转,form表单的点击提交 .self 是只有是自己触发的自己才会执行...,如果接受到内部的冒泡事件传递信号触发,会忽略掉这个信号 .capture 是改变js默认的事件机制,默认是冒泡,capture功能是将冒泡改为倾听模式 .once 是将事件设置为只执行一次,如 .click.prevent.once...代表只阻止事件的默认行为一次,当第二次触发的时候事件本身的行为会执行 .passive 滚动事件的默认行为 (即滚动行为) 将会立即触发,而不会等待 onScroll 完成。...阻止click事件冒泡(防止触发另一个事件)的方法 使用vue阻止子级元素的click事件冒泡。

5.9K10

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...(function(e){ //如果提供了事件对象,则这是一个非IE浏览器 if ( e && e.preventDefault

5.8K40

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; 就行了。

10.3K53

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.2K10

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

在前端开发工作中,由于浏览器兼容性等问题,我们会经常用到“停止事件冒泡”和“阻止浏览器默认行为”。...7 window.event.cancelBubble = true; 8 return false; 2.阻止浏览器的默认行为 JavaScript代码 1 element.onclick =...7 if (event&& event.preventDefault) { 8 9   //阻止默认浏览器动作(W3C) 10 11 event.preventDefault(...return false; } 但是在使用return false时必须注意: 1、jQuery有自己的事件处理层,也对处理程序做了封装,如果事件处理程序返回false,事件冒泡和浏览器默认事件都会被阻止...2、使用原生javaScript,在事件处理程序中返回false只会阻止浏览器默认行为,而事件冒泡依然存在。 3、浏览器默认行为和事件冒泡是相互独立的。阻止事件冒泡不会影响默认行为,反之亦然。

5.2K120

事件冒泡和传播

举栗子 事件输出hello world 事件有两种,一种为事件传播,一种是事件冒泡 事件传播事件冒泡 这还要从遥远的荒诞说起,两家网景和ie,为了能争夺市场,互相使用相反的技术,当网景使用事件传播的时候...(两个正好相反)这个时候w3c来了,为了能规范规定,直接取折中,当事件发生时,先发生向下传播,当到底了以后再次使用事件冒泡,逐渐的冒泡到顶层window DOM为一个完整的树 使用事件传播输出hello...否则为事件传播 冒泡为上,事件传播为下,事件传播优于事件冒泡 [15.gif] 可以明确的知道,此时为false为冒泡,即全部向上传播,这个比较简单不在阐述 阻止进一步冒泡 // 获取元素 var div1...你点击的是内框"); event.stopPropagation(); // 阻止事件进一步传播 }, false); div3.addEventListener('click', () => {...你点击的是文字"); }, false); js如上,在div2内部使用event.stopPropagation()阻止进一步冒泡 结果如下 [16.gif] 可以看到明显的被阻挡 传播 传播方向更冒泡相反

85160

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

什么是事件冒泡 在一个对象上触发某类事件(比如单击onclick事件),如果此对象定义了此事件的处理程序,那么此事件就会调用这个处理程序,如果没有定义此事件处理程序或者事件返回true,那么这个事件会向这个对象的父级对象传播...事件冒泡机制有时候是不需要的,需要阻止掉,通过 event.stopPropagation() 来阻止 阻止上面点击黄色div的click()冒泡传递 ?...设置了阻止冒泡传递之后,那么click()事件就不会传递到father和grandfather的事件,所以只有一个alert()弹出。 完整事件冒泡示例代码 <script type="text/javascript" src="jquery-3.4.0.min.<em>js</em>...: return false; 好,下面将<em>阻止</em><em>事件</em>冒泡的方法写成return false;来看看。

5.5K41
领券