什么是冒泡？ DOM事件流（event flow ）存在三个阶段：事件捕获阶段、处于目标阶段、事件冒泡阶段。...事件冒泡**（***dubbed bubbling***）**：与事件捕获恰恰相反，事件冒泡顺序是由内到外进行事件传播，直到根节点。...dom标准事件流的触发的先后顺序为：先捕获再冒泡，即当触发dom事件时，会先进行事件捕获，捕获到事件源之后通过事件传播进行事件冒泡。...参数 useCapture 是选填的，填true或者false，用于描述事件是冒泡还是捕获，true表示捕获，默认的false表示冒泡。...stopPropagation()方法 } else { window.event.cancelBubble = true; //否则，我们需要使用IE的方式来取消事件冒泡
先上结论： 他们是描述事件触发时序问题的术语。事件捕获指的是从document到触发事件的那个节点，即自上而下的去触发事件。相反的，事件冒泡是自下而上的去触发事件。...绑定事件方法的第三个参数，就是控制事件触发顺序是否为事件捕获。true,事件捕获；false,事件冒泡。默认false,即事件冒泡。...Jquery的e.stopPropagation会阻止冒泡，意思就是到我为止，我的爹和祖宗的事件就不要触发了。...事件的触发顺序自内向外，这就是事件冒泡。...事件触发顺序变更为自外向内，这就是事件捕获。 方法： 阻止事件冒泡 和默认行为。 事件冒泡： ? 阻止默认行为： ?
事件目标 如今。事件处理程序中的变量event保存着事件对象。而event.target属性保存着发生事件的目标元素。这个属性是DOM API中规定的，可是没有被全部浏览器实现 。...jQuery对这个事件对象进行了必要的扩展，从而在不论什么浏览器中都能够使用这个属性。通过.target，能够确定DOM中首先接收到事件的元素（即实际被单击的元素）。...停止事件传播 事件对象还提供了一个.stopPropagation()方法，该方法能够全然阻止事件冒泡。...在这样的情况下，.preventDefault()方法则能够在触发默认操作之前终止事件 。 提示 当在事件的环境中完毕了某些验证之后，一般会用到.preventDefault()。比如。...事件传播和默认操作是相互独立的两套机制，在二者不论什么一方发生时，都能够终止还有一方。假设想要同一时候停止事件传播和默认操作，能够在事件处理程序中返回false。
事件冒泡： 事件冒泡由IE团队提出来的，即事件开始由最具体的元素（文档中嵌套层次最深的那个节点）接收，然后逐级向上传播。...IE9，chrome，Firefox，Opera，Safari都支持事件冒泡，并将事件冒泡到window对象。 如下，点击obj3，依次弹出obj3、world、hello。...addEventListener('click', function () { alert('obj3'); })//依次弹出obj3、world、hello 阻止事件冒泡的方法...： 方式一：event.stopPropagation(); 方式二：return false; return false 不仅阻止了事件往上冒泡，而且阻止了事件本身。...event.stopPropagation() 则只阻止事件往上冒泡，不阻止事件本身。
当父子元素中都有点击事件的时候，为了让触发子元素中的事件时，不去触发父元素中的事件，可以在子元素事件中添加stop来阻止事件冒泡。....stop 是阻止冒泡行为,不让当前元素的事件继续往外触发,如阻止点击div内部事件,触发div事件 .prevent 是阻止事件本身行为,如阻止超链接的点击跳转,form表单的点击提交 .self 是只有是自己触发的自己才会执行...,如果接受到内部的冒泡事件传递信号触发,会忽略掉这个信号 .capture 是改变js默认的事件机制,默认是冒泡,capture功能是将冒泡改为倾听模式 .once 是将事件设置为只执行一次,如 .click.prevent.once...阻止click事件冒泡(防止触发另一个事件)的方法 使用vue阻止子级元素的click事件冒泡。...方法二 可以自己写个阻止冒泡事件 然后在发生冒泡的元素中调用这个事件 @click="_stopPropagation($event)" methods：{ _stopPropagation
事件冒泡的原因是事件源本身可能没有处理事件的能力，即处理事件的函数并未绑定在该事件源上。它本身并不能处理事件，所以需要将事件传播出去，从而能达到处理该事件的执行函数。...实例 当点击id为i3的时，浏览器会依次弹出3 2 1，这就是事件冒泡，此正方形处于叶节点上，对其操作的事件会向上进行冒泡，直到根节点。 JS事件冒泡及阻止 div{...DOCTYPE html> JS事件冒泡及阻止 li{...注意 不是所有的事件都能冒泡。以下事件不冒泡：blur、focus、load、unload。 事件解决方案方式在不同浏览器，可能是有所区别的，有些不支持捕获型方案，多数浏览器默认冒泡型方案。
讲 事件冒泡 、阻止冒泡 和 事件捕获 之前先说说什么是事件流，这样会更容易明白 一、事件和事件流 1、什么是事件 事件是可以被 JavaScript 侦测到的行为。...鼠标点击、鼠标移动、鼠标滚动、按下键盘，浏览器窗口大小的改变，网页加载完成，关闭网页等等都会发生事件。 2、什么是事件流 事件流，描述的是页面中接受事件的顺序。...一个完整的JS事件流是从window开始，最后回到window的一个过程。 事件流被分为三个阶段(1~ 5)捕获过程、(5~ 6)事件触发过程、(6~ 10)冒泡过程。...三、阻止冒泡 1、JS阻止事件冒泡 我们用 e.stopPropagation() 这个方法添加到某事件函数里的末尾，就可以做到阻止冒泡事件。...事件句柄在冒泡阶段执行 从上面的表格中，可以看到参数值useCapture，为true的时候，事件在捕获过程中就会执行。
事件机制 ---- 事件触发三个阶段： window往事件触发处传播，遇到注册的捕获事件会触发 传播到事件触发处时触发注册的事件 从事件触发处往window传播，遇到注册的冒泡事件会触发 事件触发一般会按照...|------------------------------------------- 但是有一个特例：如果给body中的子节点同时注册冒泡和捕获事件，事件触发会按照注册的顺序执行。...// 以下会先打印冒泡然后是捕获node.addEventListener( 'click', event => { console.log('冒泡') }, false)node.addEventListener...'}, true) 当点击innner元素时，如下元素发生了： 点击事件开始于捕获阶段，在此阶段浏览器会在所有祖先元素上查找点击事件处理函数（从document开始） 结果找到了2个，分别在document...此时进入冒泡阶段，inner上的时间处理器得到执行 事件命中元素后开始向上冒泡，一路查找是否注册了冒泡阶段的祖先元素上的时间处理器。由于没有找到因此什么也没发生。
事件与事件流 事件，是文档或浏览器窗口发生的一些特定的交互事件。事件流，描述的是页面中接收事件的顺序。 默认情况下，事件使用冒泡事件流，不使用捕获事件流。...捕获与冒泡 事件捕获：执行顺序(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事件都会分为两个阶段捕获和冒泡。...最后是outer冒泡阶段 由此我们可以看到，事件触发的时候实际上都是有捕获和冒泡阶段的，并且捕获阶段会从最外层的父级元素开始捕获，一直捕获到最后触发事件的那个元素点才会停止，那么冒泡阶段反之，会从最内层触发的那个元素开始往外层的父级元素一直冒泡...并且事件的触发是先捕获，在冒泡。 阻止事件冒泡 事件的冒泡会让我们实现某些功能的时候产生阻碍，那么我们怎么怎么阻止事件的冒泡呢，这个时候就会用到一个方法。...这样就成功的阻止了事件的冒泡，是不是很神奇，那么我们阻止事件冒泡还有别的方法吗，答案是肯定的，这时候就得了解一下我们的event对象了,我们打印一下event对象，如下： 打印发现当我们触发事件时，...我们在使用中多数情况下只使用冒泡监听。例如一条购物车信息，在这条信息中，右下角有一个删除按钮。点击这条消息可查看详情，点击删除按钮可将此商品移除。
'block'; var oEvent = ev || event; oEvent.cancelBubble = true; // 取消事件冒泡
// 冒泡排序 var arr = [2, 4, 1, 6, 7, 8, 33, 11,77,88,99,3,100]; function sort(array
1){ Event.EventData = "内部按钮"; btn1.dispatchEvent(Event);//将事件分派到事件流中...else{ Event.EventData = "外部按钮"; btn2.dispatchEvent(Event);//将事件分派到事件流中...刷新页面 点击“外部BTN” 结果如图所示 因为事件的引发者没有在panl1中所以不会再触发panel1的事件了 以上说的都是非冒泡事件，事件的执行顺序是从外层容器到内层容器执行的 5....是false 这样设置后就是冒泡事件，事件的执行顺序是从内层容器到外层容器执行的 6....如果即要捕捉非冒泡事件，又要捕捉冒泡事件 那么 创建事件的代码为 var Event:btnEvent1=new btnEvent1(btnEvent1.EVENT_NAME,true);//最后一个参数
——拉罗什富科 nvue中@tap.stop阻止冒泡失效了 代码如下： 触发触发 大概有两种方案，第一种是改事件，改为@touchend事件 触发触发</view
/jquery-1.11.0.min.js" type="text/javascript"> ...-- li在ul里，ul在div中，只要点击了li，也就是点击了ul,也就是点击了div。...在上面的函数中，先弹出 “我是li”然后弹出“我是ul”，最后弹出“我是div” 一层一层的冒泡，而阻止冒泡的方式就是调用 事件的对象来调用stopPropagation()方法。...单机tree时，会同时触发two，然后触发one 2.如果在click事件中，在你要处理的事件之前加上e.preventDefault(); 那么就取消了行为（通俗理解：相当于做了个return操作）...3.e.stopPropagation()只要在click事件中，就不会触发上层click事件。
as3.0中的事件冒泡机制有时候会很烦人，比如一个Sprite(方便下文描述就命名为Container吧)把另一外Sprite(称为Child吧)做为子元素套进来以后，如果两个Sprite都注册了Mouse_Down...事件，要想在Child上点击鼠标时系统只响应Child的Mouse_Down事件，默认是不行的，因为事件冒泡会让Container也响应Mouse_Down事件，示例代码： package { import...Adobe总不至于傻到弄二个功能一样的东东吧 官方的解释： stopImmediatePropagation():void 防止对事件流中当前节点中和所有后续节点中的事件侦听器进行处理。 ...stopPropagation():void 防止对事件流中当前节点的后续节点中的所有事件侦听器进行处理。...，stopPropagation将把该事件注册的所有监听处理函数执行完后，再阻止该事件继续向上冒泡；而stopImmediatePropagation方法将本次处理函数执行完后就立即阻止事件继续向上冒泡
javascript 的事件捕获和事件冒泡之前一直没能弄明白，知道看到一个例子。...点击可查看示例 去示例中试一试便清楚了~ 处理事件 理解了事件的捕获和冒泡机制，对于事件处理就好办了。...阻止默认事件 event.preventDefault() // 阻止事件默认动作，比如阻止 submit 按钮默认提交 event.stopPropagation() // 阻止捕获 和 冒泡阶段中事件的进一步传播...，比如是在‘石头’下沉或者‘气泡’冒泡的过程中使之突然消失 事件代理： 从上面事件机制可以看出，如果没有外部干扰，在子节点上触发的事件，在捕获和冒泡最终都会经过父节点 因此，我们可以将事件处理函数绑定在父节点上面...这样做的好处一个是可以不关心子元素是同步还是异步的 另一个是如果有多个子元素，可以不用绑定多个事件（在异步列表 click 事件中很常见）。
什么是JS事件冒泡？...（摘自网络） 如何来阻止Jquery事件冒泡？...，阻止了事件冒泡，但不会阻击默认行为（它就执行了超链接的跳转） 2.return false; 事件处理过程中，阻止了事件冒泡，也阻止了默认行为（比如刚才它就没有执行超链接的跳转） 还有一种有冒泡有关的...： 3.event.preventDefault(); 如果把它放在头部A标签的click事件中，点击“点击我”。 ...会发现它依次弹出：我是最里层---->我是中间层---->我是最外层，但最后却没有跳转到百度 它的作用是：事件处理过程中，不阻击事件冒泡，但阻击默认行为（它只执行所有弹框，却没有执行超链接跳转）
1、event除了具有目标元素，事件类型，时间，位置等有效值 外，还有 bubbles cancelable 等 与冒泡相关的属性。...区别就是：preventDefault:当事件有cancelable=true时， 事件就取消了 stopPropagation :事件停止向DOM的上级传播。...stopImmediatePropagation: 在当前事件执行的函数中，立即停止传播。...这样就有机会根据上次事件结果，来决定是否终止事件链！...事件终止传播 其它时候都返回true，事件继续传播下去。
事件冒泡的作用 事件冒泡允许多个操作被集中处理（把事件处理器添加到一个父级元素上，避免把事件处理器添加到多个子级元素上），它还可以让你在对象层的不同级别捕获事件。...事件冒泡的示例 编写三个嵌套的div，同时绑定click事件，来演示事件冒泡。 ?...设置了阻止冒泡传递之后，那么click()事件就不会传递到father和grandfather的事件，所以只有一个alert()弹出。 完整事件冒泡示例代码 <script type="text/javascript" src="jquery-3.4.0.min.<em>js</em>...合并阻止操作 实际开发<em>中</em>，一般把阻止<em>冒泡</em>和阻止默认行为合并起来写，合并写法可以用 // event.stopPropagation(); // event.preventDefault(); // 合并写法
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
实时音视频
对象存储
即时通信 IM
