什么是冒泡？ DOM事件流（event flow ）存在三个阶段：事件捕获阶段、处于目标阶段、事件冒泡阶段。...事件捕获*（****event capturing****）*：通俗的理解就是，当鼠标点击或者触发dom事件时，浏览器会从根节点开始由外到内进行事件传播，即点击了子元素，如果父元素通过事件捕获方式注册了对应的事件的话...事件冒泡**（***dubbed bubbling***）**：与事件捕获恰恰相反，事件冒泡顺序是由内到外进行事件传播，直到根节点。...dom标准事件流的触发的先后顺序为：先捕获再冒泡，即当触发dom事件时，会先进行事件捕获，捕获到事件源之后通过事件传播进行事件冒泡。...) }); 输出结果（点击div2的时候执行的结果） ?
先上结论： 他们是描述事件触发时序问题的术语。事件捕获指的是从document到触发事件的那个节点，即自上而下的去触发事件。相反的，事件冒泡是自下而上的去触发事件。...绑定事件方法的第三个参数，就是控制事件触发顺序是否为事件捕获。true,事件捕获；false,事件冒泡。默认false,即事件冒泡。...Jquery的e.stopPropagation会阻止冒泡，意思就是到我为止，我的爹和祖宗的事件就不要触发了。...事件的触发顺序自内向外，这就是事件冒泡。...事件触发顺序变更为自外向内，这就是事件捕获。 方法： 阻止事件冒泡 和默认行为。 事件冒泡： ? 阻止默认行为： ?
事件目标 如今。事件处理程序中的变量event保存着事件对象。而event.target属性保存着发生事件的目标元素。这个属性是DOM API中规定的，可是没有被全部浏览器实现 。...停止事件传播 事件对象还提供了一个.stopPropagation()方法，该方法能够全然阻止事件冒泡。...以便訪问事件对象。然后。通过简单地调用event.stopPropagation()就能够避免其它全部DOM元素响应这个事件。这样一来，单击button的事件会被button处理。...这样的行为与我们讨论的事件处理程序不是同一个概念，它是单击锚元素的默认操作。类似地，当用户在编辑完表单后按下回车键时。会触发表单的submit事件，在此事件发生后，表单提交才会真正发生。...事件传播和默认操作是相互独立的两套机制，在二者不论什么一方发生时，都能够终止还有一方。假设想要同一时候停止事件传播和默认操作，能够在事件处理程序中返回false。
事件冒泡： 事件冒泡由IE团队提出来的，即事件开始由最具体的元素（文档中嵌套层次最深的那个节点）接收，然后逐级向上传播。...IE9，chrome，Firefox，Opera，Safari都支持事件冒泡，并将事件冒泡到window对象。 如下，点击obj3，依次弹出obj3、world、hello。...： 方式一：event.stopPropagation(); 方式二：return false; return false 不仅阻止了事件往上冒泡，而且阻止了事件本身。...event.stopPropagation() 则只阻止事件往上冒泡，不阻止事件本身。...如下，点击obj3，依次弹出hello、world、obj3。
实例 当点击id为i3的时，浏览器会依次弹出3 2 1，这就是事件冒泡，此正方形处于叶节点上，对其操作的事件会向上进行冒泡，直到根节点。 JS事件冒泡及阻止 div{...，使用冒泡就不需要为每个绑定点击事件，可以称为事件委托 JS事件冒泡及阻止 li{...阻止冒泡并不能阻止对象默认行为，例如submit按钮被点击后会提交表单数据，需使用e.preventDefault();阻止默认行为，IE则是window.event.returnValue = false
讲 事件冒泡 、阻止冒泡 和 事件捕获 之前先说说什么是事件流，这样会更容易明白 一、事件和事件流 1、什么是事件 事件是可以被 JavaScript 侦测到的行为。...一个完整的JS事件流是从window开始，最后回到window的一个过程。 事件流被分为三个阶段(1~ 5)捕获过程、(5~ 6)事件触发过程、(6~ 10)冒泡过程。...二、事件冒泡 看了上面的那张图应该对事件冒泡有了大概的了解了吧。总结来说就是： 当一个元素接收到事件的时候 会把他接收到的事件传给自己的父级，一直到window。...三、阻止冒泡 1、JS阻止事件冒泡 我们用 e.stopPropagation() 这个方法添加到某事件函数里的末尾，就可以做到阻止冒泡事件。...2、JQ阻止事件冒泡 jq阻止事件冒泡就简单了，直接在事件函数里面添加 return false; 就行了。
事件机制 ---- 事件触发三个阶段： window往事件触发处传播，遇到注册的捕获事件会触发 传播到事件触发处时触发注册的事件 从事件触发处往window传播，遇到注册的冒泡事件会触发 事件触发一般会按照...|------------------------------------------- 但是有一个特例：如果给body中的子节点同时注册冒泡和捕获事件，事件触发会按照注册的顺序执行。...'}, true) 当点击innner元素时，如下元素发生了： 点击事件开始于捕获阶段，在此阶段浏览器会在所有祖先元素上查找点击事件处理函数（从document开始） 结果找到了2个，分别在document...于是，document和outer的点击处理函数被执行 继续向下寻找，直到到达inner元素本身，捕获阶段就此结束。...此时进入冒泡阶段，inner上的时间处理器得到执行 事件命中元素后开始向上冒泡，一路查找是否注册了冒泡阶段的祖先元素上的时间处理器。由于没有找到因此什么也没发生。
——达·芬奇 js禁止右键点击事件触发代码 function click() { return false; } function click1() { if (event.button
背景 在开发过程中，明明调试好的阻止冒泡没有问题，但是真正使用 时候发现阻止冒泡失效了，原来原因是点击事件里依赖了异步返回结果。...{ i.addEventListener("click",function (e) { console.log("i",i) // 阻止冒泡...console.log("i",i) doReport(reportList, timeout).then(() => { // 阻止冒泡...ev.cancelBubble = true; } }) }) } doReport是一个上报方法，这里要等待上报完成之后再执行点击逻辑...，会导致阻止冒泡失效。
事件与事件流 事件，是文档或浏览器窗口发生的一些特定的交互事件。事件流，描述的是页面中接收事件的顺序。 默认情况下，事件使用冒泡事件流，不使用捕获事件流。...捕获与冒泡 事件捕获：执行顺序(document->html->body->div) 事件冒泡：执行顺序(div->body->html->document) IE < 9：只支持事件冒泡...IE 9+|chrome|firefox|safari：事件冒泡+事件捕获 阻止捕获与冒泡 event.stopPropagation() 示例代码 <!...('click', function (event) { console.log('middle-->事件冒泡'); // 阻止事件冒泡，外层不会再捕获到事件...}, false); outer.addEventListener('click', function (event) { console.log('outer-->事件冒泡
说到js事件大家肯定都知道，那么今天讲一点大家不知道的(假设大家不知道?)。 所有的js事件都会分为两个阶段捕获和冒泡。...方法来判断触发的节点是不是当前我们点击的节点，就可以很巧妙的阻止事件的冒泡了。 应用场景举例 可能很多朋友感觉，这个东西我根本用不到啊，不会出现这种情况，我怎么会把父元素和子元素绑定相同的事件呢？...我们在使用中多数情况下只使用冒泡监听。例如一条购物车信息，在这条信息中，右下角有一个删除按钮。点击这条消息可查看详情，点击删除按钮可将此商品移除。...我们会分别给信息的div和删除button添加一个冒泡的click事件监听。如果不做阻止传递，点击删除button后，会显示商品详情。显然这不是我们想看到的。...这时我们给button一个阻止事件传递的功能，点击删除按钮后，事件就会结束，就不再显示商品详情。 本文为作者原创，手码不易，允许转载，转载后请以链接形式说明文章出处。
当父子元素中都有点击事件的时候，为了让触发子元素中的事件时，不去触发父元素中的事件，可以在子元素事件中添加stop来阻止事件冒泡。....stop 是阻止冒泡行为,不让当前元素的事件继续往外触发,如阻止点击div内部事件,触发div事件 .prevent 是阻止事件本身行为,如阻止超链接的点击跳转,form表单的点击提交 .self 是只有是自己触发的自己才会执行...,如果接受到内部的冒泡事件传递信号触发,会忽略掉这个信号 .capture 是改变js默认的事件机制,默认是冒泡,capture功能是将冒泡改为倾听模式 .once 是将事件设置为只执行一次,如 .click.prevent.once...阻止click事件冒泡(防止触发另一个事件)的方法 使用vue阻止子级元素的click事件冒泡。...方法二 可以自己写个阻止冒泡事件 然后在发生冒泡的元素中调用这个事件 @click="_stopPropagation($event)" methods：{ _stopPropagation
一、知识要点 oEvent.cancelBubble = true; 二、源码参考 点击页面隐藏（模仿下拉列表） <!...'block'; var oEvent = ev || event; oEvent.cancelBubble = true; // 取消事件冒泡...（否则会触发页面点击操作，导致隐藏） }; document.onclick = function () { // 点击页面隐藏
运行程序 点击“内部BTN： 结果如图所示 大家可以看到 事件是从外层容器到内层容器依次执行的 4....刷新页面 点击“外部BTN” 结果如图所示 因为事件的引发者没有在panl1中所以不会再触发panel1的事件了 以上说的都是非冒泡事件，事件的执行顺序是从外层容器到内层容器执行的 5....是false 这样设置后就是冒泡事件，事件的执行顺序是从内层容器到外层容器执行的 6....如果即要捕捉非冒泡事件，又要捕捉冒泡事件 那么 创建事件的代码为 var Event:btnEvent1=new btnEvent1(btnEvent1.EVENT_NAME,true);//最后一个参数...);//非冒泡监听 this.panel1.addEventListener(btnEvent1.EVENT_NAME,panelCatchEvent,false);//冒泡监听 这样设置之后，事件先从外部执行到内部
/jquery-1.11.0.min.js" type="text/javascript"> ...-- li在ul里，ul在div中，只要点击了li，也就是点击了ul,也就是点击了div。...在上面的函数中，先弹出 “我是li”然后弹出“我是ul”，最后弹出“我是div” 一层一层的冒泡，而阻止冒泡的方式就是调用 事件的对象来调用stopPropagation()方法。...这个事件的对象就是函数的参数 e 这个e的名字可以随便取--> 请点击我 说明...： 1.一个事件起泡对应触发的是上层的同一事件 单击two的时候就会起泡触发one单击的事件。
1、event除了具有目标元素，事件类型，时间，位置等有效值 外，还有 bubbles cancelable 等 与冒泡相关的属性。...区别就是：preventDefault:当事件有cancelable=true时， 事件就取消了 stopPropagation :事件停止向DOM的上级传播。...，主动生成一个事件，并推送给el。...这样就有机会根据上次事件结果，来决定是否终止事件链！...事件终止传播 其它时候都返回true，事件继续传播下去。
什么是JS事件冒泡？...（摘自网络） 如何来阻止Jquery事件冒泡？...这就是事件冒泡，本来我只点击ID为hr_three的标签，但是确执行了三个alert操作。 事件冒泡过程（以标签ID表示）：hr_three----> divTwo----> divOne 。...“点击我”，会弹出：我是最里层，但不会执行链接到百度页面 由此可以看出： 1.event.stopPropagation(); 事件处理过程中，阻止了事件冒泡，但不会阻击默认行为（它就执行了超链接的跳转... 如果把它放在头部A标签的click事件中，点击“点击我”。
javascript 的事件捕获和事件冒泡之前一直没能弄明白，知道看到一个例子。...利用丢一颗石头入水的例子，就能够非常形象了，如图所示： 事件捕获和事件冒泡就像是一颗石头(点击事件)投入水中： 首先是最外层水面(html)接触(捕获)石头，然后石头下沉，内层的水(body/dom...当石头到达池塘底部(事件被捕获)之后，产生了一个气泡，然后就开始了冒泡阶段 由底部（目标元素）产生的气泡，由内而外，不断向上冒泡，直到最外面（html标签）结束。...点击可查看示例 去示例中试一试便清楚了~ 处理事件 理解了事件的捕获和冒泡机制，对于事件处理就好办了。...，比如是在‘石头’下沉或者‘气泡’冒泡的过程中使之突然消失 事件代理： 从上面事件机制可以看出，如果没有外部干扰，在子节点上触发的事件，在捕获和冒泡最终都会经过父节点 因此，我们可以将事件处理函数绑定在父节点上面
事件冒泡的示例 编写三个嵌套的div，同时绑定click事件，来演示事件冒泡。 ?...只单单点击了一次黄色的div，但是却弹出了三个alert()，这种就如同冒泡一样，逐个从底部元素传递到上级的元素。...再次点击看看，如下： ? ? ? 事件冒泡示例的结论 可以看出点击黄色div，依然会依次弹出三个alert()。...说明这个click()事件的传递并不是根据点击位置，而是根据html元素的嵌套。...事件冒泡机制有时候是不需要的，需要阻止掉，通过 event.stopPropagation() 来阻止 阻止上面点击黄色div的click()冒泡传递 ?
-- jy_mothed 是在 js 中自定义的方法 --> 想念 ...-- 点击事件 参数化调用 --> <button v-on:click="loveU('愿我如星君如月... 夜夜流光相皎洁 ...')"...jy_mothed: function (event) { alert('想你，' + this.name) // this:当前 Vue 实例 if (event) { // 原生 DOM 事件
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
即时通信 IM
ICP备案
对象存储
实时音视频
