首页
学习
活动
专区
工具
TVP
发布
您找到你想要的搜索结果了吗?
是的
没有找到

js事件防止冒泡

事件目标 如今。事件处理程序中变量event保存着事件对象。而event.target属性保存着发生事件目标元素。这个属性是DOM API中规定,可是没有被全部浏览器实现 。...jQuery对这个事件对象进行了必要扩展,从而在不论什么浏览器中都能够使用这个属性。通过.target,能够确定DOM中首先接收到事件元素(即实际被单击元素)。...我们能够不把检查代码放在这里,而是通过改动button行为来达到目标 。 2. 停止事件传播 事件对象还提供了一个.stopPropagation()方法,该方法能够全然阻止事件冒泡。...这样行为与我们讨论事件处理程序不是同一个概念,它是单击锚元素默认操作。类似地,当用户在编辑完表单后按下回车键时。会触发表单submit事件,在此事件发生后,表单提交才会真正发生。...假设我们不希望运行这样默认操作。那么在事件对象上调用.stopPropagation()方法也无济于事,由于默认操作不是在正常事件传播流中发生

2.4K40

JS事件冒泡和捕获

事件机制 ---- 事件触发三个阶段: window往事件触发处传播,遇到注册捕获事件会触发 传播到事件触发处时触发注册事件事件触发处往window传播,遇到注册冒泡事件会触发 事件触发一般会按照...|------------------------------------------- 但是有一个特例:如果给body中子节点同时注册冒泡和捕获事件事件触发会按照注册顺序执行。...和outer上面,而且这两个事件处理函数useCapture选项为true,说明他们被注册在捕获阶段。...此时进入冒泡阶段,inner上时间处理器得到执行 事件命中元素后开始向上冒泡,一路查找是否注册了冒泡阶段祖先元素上时间处理器。由于没有找到因此什么也没发生。...我们把时间注册在冒泡阶段(addEventListeneruseCapture选项为false) var selector = document.querySelector.bind(document

2.5K20

JS事件冒泡及阻止

事件冒泡及阻止 当一个元素接收到事件时候,会把他接收到事件传给自己父级,一直到window,当然其传播事件,绑定执行函数并不会传播,如果父级没有绑定事件函数,就算传递了事件,也不会有什么表现...事件冒泡原因是事件源本身可能没有处理事件能力,即处理事件函数并未绑定在该事件源上。它本身并不能处理事件,所以需要将事件传播出去,从而能达到处理该事件执行函数。...实例 当点击id为i3时,浏览器会依次弹出3 2 1,这就是事件冒泡,此正方形处于叶节点上,对其操作事件会向上进行冒泡,直到根节点。 JS事件冒泡及阻止 div{...有时候我们并不希望事件冒泡而去执行上级节点绑定事件,这时候就需要阻止事件冒泡,w3c方法是e.stopPropagation(),IE则是使用 window.event.cancelBubble

6.4K20

JS事件流、事件冒泡、阻止冒泡事件捕获(一看就懂)

事件冒泡 、阻止冒泡事件捕获 之前先说说什么是事件流,这样会更容易明白 一、事件事件流 1、什么是事件 事件是可以被 JavaScript 侦测到行为。...一个完整JS事件流是从window开始,最后回到window一个过程。 事件流被分为三个阶段(1~ 5)捕获过程、(5~ 6)事件触发过程、(6~ 10)冒泡过程。...二、事件冒泡 看了上面的那张图应该对事件冒泡有了大概了解了吧。总结来说就是: 当一个元素接收到事件时候 会把他接收到事件传给自己父级,一直到window。...三、阻止冒泡 1、JS阻止事件冒泡 我们用 e.stopPropagation() 这个方法添加到某事件函数里末尾,就可以做到阻止冒泡事件。...事件句柄在冒泡阶段执行 从上面的表格中,可以看到参数值useCapture,为true时候,事件在捕获过程中就会执行。

9.8K53

JS事件,你真的懂吗(捕获,冒泡)?

说到js事件大家肯定都知道,那么今天讲一点大家不知道(假设大家不知道?)。 所有的js事件都会分为两个阶段捕获和冒泡。...true表示监听事件捕获阶段,false表示监听事件冒泡阶段。 返回值 没有返回值 示例: <!...然后是inner冒泡阶段 最后是outer冒泡阶段 由此我们可以看到,事件触发时候实际上都是有捕获和冒泡阶段,并且捕获阶段会从最外层父级元素开始捕获,一直捕获到最后触发事件那个元素点才会停止,...并且事件触发是先捕获,在冒泡。 阻止事件冒泡 事件冒泡会让我们实现某些功能时候产生阻碍,那么我们怎么怎么阻止事件冒泡呢,这个时候就会用到一个方法。...这样就成功阻止了事件冒泡,是不是很神奇,那么我们阻止事件冒泡还有别的方法吗,答案是肯定,这时候就得了解一下我们event对象了,我们打印一下event对象,如下: 打印发现当我们触发事件时,

2.2K20

JS里,事件几个细节问题--(冒泡、自定义事件)

今天想实现一个事件自动订阅到指定class元素之上功能。这句话很拗口,稍后解释! 在翻阅了MDN上api说明,多明白了许多细节。...1、event除了具有目标元素,事件类型,时间,位置等有效值 外,还有 bubbles  cancelable 等 与冒泡相关属性。...区别就是:preventDefault:当事件有cancelable=true时,  事件就取消了 stopPropagation :事件停止向DOM上级传播。...(即使当前元素还绑定着其它函数,函数本应该稍后执行情况, 后面的函数都会不执行,好霸气方法)  3、用CustomEvent来实现自定义事件。...再执行dispatchEvent一下语句。 这样就有机会根据上次事件结果,来决定是否终止事件链!

1.4K10

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

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

5.7K10

FLEXFLASH-冒泡事件与非冒泡事件

刷新页面 点击“外部BTN” 结果如图所示 因为事件引发者没有在panl1中所以不会再触发panel1事件了 以上说都是非冒泡事件事件执行顺序是从外层容器到内层容器执行 5....如果要在事件冒泡阶段捕捉事件 创建事件代码为 var Event:btnEvent1=new btnEvent1(btnEvent1.EVENT_NAME,true);//最后一个参数bubbles应为...是false 这样设置后就是冒泡事件事件执行顺序是从内层容器到外层容器执行 6....如果即要捕捉非冒泡事件,又要捕捉冒泡事件 那么 创建事件代码为 var Event:btnEvent1=new btnEvent1(btnEvent1.EVENT_NAME,true);//最后一个参数...);//非冒泡监听 this.panel1.addEventListener(btnEvent1.EVENT_NAME,panelCatchEvent,false);//冒泡监听 这样设置之后,事件先从外部执行到内部

83410

事件冒泡事件捕获

javascript 事件捕获和事件冒泡之前一直没能弄明白,知道看到一个例子。...利用丢一颗石头入水例子,就能够非常形象了,如图所示: 事件捕获和事件冒泡就像是一颗石头(点击事件)投入水中: 首先是最外层水面(html)接触(捕获)石头,然后石头下沉,内层水(body/dom...当石头到达池塘底部(事件被捕获)之后,产生了一个气泡,然后就开始了冒泡阶段 由底部(目标元素)产生气泡,由内而外,不断向上冒泡,直到最外面(html标签)结束。...点击可查看示例 去示例中试一试便清楚了~ 处理事件 理解了事件捕获和冒泡机制,对于事件处理就好办了。...,比如是在‘石头’下沉或者‘气泡’冒泡过程中使之突然消失 事件代理: 从上面事件机制可以看出,如果没有外部干扰,在子节点上触发事件,在捕获和冒泡最终都会经过父节点 因此,我们可以将事件处理函数绑定在父节点上面

1.6K10

Jquery 事件冒泡

什么是JS事件冒泡?...这就是事件冒泡,本来我只点击ID为hr_three标签,但是确执行了三个alert操作。 事件冒泡过程(以标签ID表示):hr_three----> divTwo----> divOne 。...,阻止了事件冒泡,但不会阻击默认行为(它就执行了超链接跳转) 2.return false; 事件处理过程中,阻止了事件冒泡,也阻止了默认行为(比如刚才它就没有执行超链接跳转) 还有一种有冒泡有关...会发现它依次弹出:我是最里层---->我是中间层---->我是最外层,但最后却没有跳转到百度     它作用是:事件处理过程中,不阻击事件冒泡,但阻击默认行为(它只执行所有弹框,却没有执行超链接跳转)...友情提示:事件冒泡不一定是个坏东西,有些情况会让不同层次捕获不同事件

2.8K70

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

什么是事件冒泡 在一个对象上触发某类事件(比如单击onclick事件),如果此对象定义了此事件处理程序,那么此事件就会调用这个处理程序,如果没有定义此事件处理程序或者事件返回true,那么这个事件会向这个对象父级对象传播...事件冒泡作用 事件冒泡允许多个操作被集中处理(把事件处理器添加到一个父级元素上,避免把事件处理器添加到多个子级元素上),它还可以让你在对象层不同级别捕获事件。...事件冒泡示例 编写三个嵌套div,同时绑定click事件,来演示事件冒泡。 ?...事件冒泡机制有时候是不需要,需要阻止掉,通过 event.stopPropagation() 来阻止 阻止上面点击黄色divclick()冒泡传递 ?...设置了阻止冒泡传递之后,那么click()事件就不会传递到father和grandfather事件,所以只有一个alert()弹出。 完整事件冒泡示例代码 <!

5.5K41

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

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

5.2K120

事件流、事件捕获和事件冒泡介绍

事件流、事件捕获和事件冒泡介绍 最近有用到对应场景,下班了特地来整理下响应概念,巩固下知识。 我们在点击页面时,事件发生时会在各元素节点按照一定顺序进行传播,这种传播过程就称作事件流。...事件流分为三个阶段: 1、事件捕获阶段 事件从window发出,不断向子元素寻找对应目标节点 2、事件目标阶段 事件找到了对应目标节点,即此时再往下已经没有对应节点 3、事件冒泡阶段 事件从节点位置网上回溯到文档根节点...我们在使用给dom添加事件时一般使用addEventListener方法,该方法传入三个参数 1、对应事件名称如:click 2、函数:触发对应交互响应后执行函数 3、userCapture:指定事件是在捕获还是冒泡阶段执行...:26 btn 事件捕获 test.html:23 btn 事件冒泡1 test.html:29 btn 事件冒泡2 test.html:34 container 事件冒泡 test.html:15 body...事件冒泡 可以看到,都是先触发捕获再触发冒泡事件,先从body(上)到btn(下),再从btn(下)到body(上)。

1.2K00

事件捕获、冒泡、委托

事件具有冒泡流和捕获流,两者刚好是反着来。 JavaScript原声监听事件addEventListener,接收两个参数,一个是方法,一个是布尔值,指定事件是否在捕获或冒泡阶段执行。...所以我们可以很直观打印输出事件冒泡和捕获两个过程。 ? 输出顺序是body 捕获、test 捕获、test 冒泡、body 冒泡。...当我们增加了目标函数点击事件,那么事件就不会遵守先发生捕获后再发生冒泡这一规则 ?...stopPropagation既可以阻止事件捕获还能阻止事件冒泡,如果我在test冒泡阻止了事件冒泡,那么就不会输出body冒泡。...对于事件,在事件捕获或者事件冒泡阶段处理并没有明显优劣之分,但是由于事件冒泡被所有主流浏览器兼容,从兼容性角度来说还是建议大家使用事件冒泡模型。这就是事件捕获、冒泡、委托。

1K10
领券