刷新页面 点击“外部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);//冒泡监听 这样设置之后，事件先从外部执行到内部
阻止冒泡 <script src="script...(e) { alert("我是div"); }) //e.stopPropagation();就是阻止冒泡...在上面的函数中，先弹出 “我是li”然后弹出“我是ul”，最后弹出“我是div” 一层一层的冒泡，而阻止冒泡的方式就是调用 事件的对象来调用stopPropagation()方法。...： 1.一个事件起泡对应触发的是上层的同一事件 单击two的时候就会起泡触发one单击的事件。...3.e.stopPropagation()只要在click事件中，就不会触发上层click事件。
什么是JS事件冒泡？...（摘自网络） 如何来阻止Jquery事件冒泡？...这就是事件冒泡，本来我只点击ID为hr_three的标签，但是确执行了三个alert操作。 事件冒泡过程（以标签ID表示）：hr_three----> divTwo----> divOne 。...，阻止了事件冒泡，但不会阻击默认行为（它就执行了超链接的跳转） 2.return false; 事件处理过程中，阻止了事件冒泡，也阻止了默认行为（比如刚才它就没有执行超链接的跳转） 还有一种有冒泡有关的...友情提示:事件冒泡不一定是个坏的东西，有些情况会让不同层次捕获不同的事件！
什么是冒泡？ DOM事件流（event flow ）存在三个阶段：事件捕获阶段、处于目标阶段、事件冒泡阶段。...事件冒泡**（***dubbed bubbling***）**：与事件捕获恰恰相反，事件冒泡顺序是由内到外进行事件传播，直到根节点。...dom标准事件流的触发的先后顺序为：先捕获再冒泡，即当触发dom事件时，会先进行事件捕获，捕获到事件源之后通过事件传播进行事件冒泡。...参数 useCapture 是选填的，填true或者false，用于描述事件是冒泡还是捕获，true表示捕获，默认的false表示冒泡。...stopPropagation()方法 } else { window.event.cancelBubble = true; //否则，我们需要使用IE的方式来取消事件冒泡
javascript 的事件捕获和事件冒泡之前一直没能弄明白，知道看到一个例子。...利用丢一颗石头入水的例子，就能够非常形象了，如图所示： 事件捕获和事件冒泡就像是一颗石头(点击事件)投入水中： 首先是最外层水面(html)接触(捕获)石头，然后石头下沉，内层的水(body/dom...当石头到达池塘底部(事件被捕获)之后，产生了一个气泡，然后就开始了冒泡阶段 由底部（目标元素）产生的气泡，由内而外，不断向上冒泡，直到最外面（html标签）结束。...点击可查看示例 去示例中试一试便清楚了~ 处理事件 理解了事件的捕获和冒泡机制，对于事件处理就好办了。...，比如是在‘石头’下沉或者‘气泡’冒泡的过程中使之突然消失 事件代理： 从上面事件机制可以看出，如果没有外部干扰，在子节点上触发的事件，在捕获和冒泡最终都会经过父节点 因此，我们可以将事件处理函数绑定在父节点上面
什么是事件冒泡 在一个对象上触发某类事件（比如单击onclick事件），如果此对象定义了此事件的处理程序，那么此事件就会调用这个处理程序，如果没有定义此事件处理程序或者事件返回true，那么这个事件会向这个对象的父级对象传播...事件冒泡的作用 事件冒泡允许多个操作被集中处理（把事件处理器添加到一个父级元素上，避免把事件处理器添加到多个子级元素上），它还可以让你在对象层的不同级别捕获事件。...事件冒泡的示例 编写三个嵌套的div，同时绑定click事件，来演示事件冒泡。 ?...事件冒泡机制有时候是不需要的，需要阻止掉，通过 event.stopPropagation() 来阻止 阻止上面点击黄色div的click()冒泡传递 ?...设置了阻止冒泡传递之后，那么click()事件就不会传递到father和grandfather的事件，所以只有一个alert()弹出。 完整事件冒泡示例代码 <!
先上结论： 他们是描述事件触发时序问题的术语。事件捕获指的是从document到触发事件的那个节点，即自上而下的去触发事件。相反的，事件冒泡是自下而上的去触发事件。...绑定事件方法的第三个参数，就是控制事件触发顺序是否为事件捕获。true,事件捕获；false,事件冒泡。默认false,即事件冒泡。...Jquery的e.stopPropagation会阻止冒泡，意思就是到我为止，我的爹和祖宗的事件就不要触发了。...事件的触发顺序自内向外，这就是事件冒泡。...事件触发顺序变更为自外向内，这就是事件捕获。 方法： 阻止事件冒泡 和默认行为。 事件冒泡： ? 阻止默认行为： ?
讲 事件冒泡 、阻止冒泡 和 事件捕获 之前先说说什么是事件流，这样会更容易明白 一、事件和事件流 1、什么是事件 事件是可以被 JavaScript 侦测到的行为。...一个完整的JS事件流是从window开始，最后回到window的一个过程。 事件流被分为三个阶段(1~ 5)捕获过程、(5~ 6)事件触发过程、(6~ 10)冒泡过程。...二、事件冒泡 看了上面的那张图应该对事件冒泡有了大概的了解了吧。总结来说就是： 当一个元素接收到事件的时候 会把他接收到的事件传给自己的父级，一直到window。...三、阻止冒泡 1、JS阻止事件冒泡 我们用 e.stopPropagation() 这个方法添加到某事件函数里的末尾，就可以做到阻止冒泡事件。...2、JQ阻止事件冒泡 jq阻止事件冒泡就简单了，直接在事件函数里面添加 return false; 就行了。
触摸事件捕获！继续对话： ? 至此问题终于解决，下来的公众号内容也有了着落 ? ！...在CCScrollView.js源码中搜“TOUCH_END”关键字，找到TOUCH事件注册的代码： ? 看看这里有与自己平时注册TOUCH事件有什么不同？...相信你已经发现了，关键在最后一个参数：useCapture，用于是否捕获子节点事件，又称之为向下冒泡（默认是向上冒泡），下面以TOUC_END事件为例，简单说明一下： this.node.on( cc.Node.EventType.TOUCH_END..., //触摸事件类型 this...._onTouchEnded, //事件处理函数 this, //事件处理函数的this上下文（使用箭头函数时通常被省略）
事件目标 如今。事件处理程序中的变量event保存着事件对象。而event.target属性保存着发生事件的目标元素。这个属性是DOM API中规定的，可是没有被全部浏览器实现 。...停止事件传播 事件对象还提供了一个.stopPropagation()方法，该方法能够全然阻止事件冒泡。...以便訪问事件对象。然后。通过简单地调用event.stopPropagation()就能够避免其它全部DOM元素响应这个事件。这样一来，单击button的事件会被button处理。...这样的行为与我们讨论的事件处理程序不是同一个概念，它是单击锚元素的默认操作。类似地，当用户在编辑完表单后按下回车键时。会触发表单的submit事件，在此事件发生后，表单提交才会真正发生。...事件传播和默认操作是相互独立的两套机制，在二者不论什么一方发生时，都能够终止还有一方。假设想要同一时候停止事件传播和默认操作，能够在事件处理程序中返回false。
Vue 阻止事件冒泡 by:授客 QQ：1033553122 开发环境 Win 10 element-ui "2.8.2" Vue 2.9.6 事件冒泡简介 如下图，当我们点击页面某个元素时，会产生点击事件...，事件由外到内，逐层递进（事件捕获阶段，途中的1->2->3->4），当目标元素捕捉到目标事件时，会响应事件，并由内到外，逐层往外传递(事件冒泡阶段，图中的4->5->6->7)，这便是事件冒泡。...正式因为冒泡机制，当用户点击图中目标元素div时，5,6,7事件区的元素都会响应点击事件（如果具备响应事件能力的话） ?...结论 综合实验1,2,3可知，如果想阻止哪个元素的事件冒泡（即事件只针对该元素有效），只要给该元素的事件增加.stop修饰符即可。...某些元素(如带href属性的超链接元素a)拥有自身的默认事件（事件冒泡结束之后开始执行，并且不受.stop影响）,如果不希望元素响应默认事件，可以给元素事件增加.prevent。
在uniapp项目中，经常会遇到父元素有一个点击事件，其子元素也有一个点击事件，但我们只想触发子元素事件，可是父元素也跟着触发了。...我们这时需要给子元素加上阻止事件冒泡就行了 //子元素方法 ...@click.stop 就是阻止事件冒泡的写法 未经允许不得转载：肥猫博客 » uniapp阻止事件冒泡
事件冒泡： 事件冒泡由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() 则只阻止事件往上冒泡，不阻止事件本身。
举栗子 事件输出hello world 事件有两种，一种为事件传播，一种是事件冒泡 事件传播和事件冒泡 这还要从遥远的荒诞说起，两家网景和ie，为了能争夺市场，互相使用相反的技术，当网景使用事件传播的时候...，ie使用事件冒泡。...（两个正好相反）这个时候w3c来了，为了能规范规定，直接取折中，当事件发生时，先发生向下传播，当到底了以后再次使用事件冒泡，逐渐的冒泡到顶层window DOM为一个完整的树 使用事件传播输出hello...否则为事件传播 冒泡为上，事件传播为下，事件传播优于事件冒泡 [15.gif] 可以明确的知道，此时为false为冒泡，即全部向上传播，这个比较简单不在阐述 阻止进一步冒泡 // 获取元素 var div1...，为向下，且传播优先于冒泡 并且事件先进行向上传，直到遇到设置为冒泡的元素的时候，停止向上传，开始进行从上到下的捕获，先最外层捕获，然后逐层捕获，直到完成。
前端开发中不可避免会接触到事件冒泡，今天简单记录一下处理事件冒泡的一点经验，谈不上心得，聊当抛砖引玉。 不谈移动端，以PC浏览器的click事件为例。...事件冒泡机制最初是由微软提出的，而事件捕捉机制是由NetScape提出的，这两种机制是完全不同的事件流处理机制，平常较多地被认为是事件冒泡的两种方式，其实是不严谨的。...冒泡事件流 简单来讲，以click为例，冒泡事件流就是从被点击的节点一层层的向上冒泡，直到节点，这也是被大多数人熟知的方式，在此便不再赘述。...捕捉事件流 NetScape提出的捕捉式事件流处理机制，跟冒泡事件流完全相反，是从最外层容器(也就是)开始往里传递事件。...false的时候，捕捉事件流跟冒泡事件流的顺序是一致的，也就是从里往外传递。
事件流、事件捕获和事件冒泡的介绍 最近有用到对应的场景，下班了特地来整理下响应的概念，巩固下知识。 我们在点击页面时，事件发生时会在各元素节点按照一定的顺序进行传播，这种传播过程就称作事件流。...事件流分为三个阶段： 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（上）。
简单说下事件委托与阻止冒泡 html: <li class="active_sort_opts" data-id...$("ul[data-type='cityPick']").on('click','li',function(){ alert("子元素li被点击"); }); 当点击具体的li元素时，发现ul的事件也被触发了...父元素ul被点击"); }); $("ul[data-type='cityPick']").on('click','li',function(e){ e.stopPropagation();//阻止冒泡...alert("子元素li被点击"); }); 加一句阻止冒泡即可。
事件的阐述不是本文的重点，尚未了解的朋友，可以访问W3school教程 进行了解，这将有助于更好地理解以下的内容 。 2.冒泡机制 什么是冒泡呢？ ...原因就在于事件的冒泡，点击span的时候，span 会把产生的事件往上冒泡，作为父节点的div2 和 祖父节点的div1也会收到此事件，于是会做出事件响应，执行响应函数。...类似地，对某一个节点而言，如果不想它现在处理的事件继续往上冒泡的话，我们可以终止冒泡： 在相应的处理函数内，加入 event.stopPropagation() ,终止事件的广播分发，这样事件停留在本节点...; } }); } 比较： 从事件传递上看：方法一在于取消事件冒泡，即当某些节点取消冒泡后，事件不会再传递；方法二在于不阻止冒泡，过滤需要处理的事件...我们再来分析一下方法二：方法二的原理是 元素收到事件后，判断事件是否符合要求，然后做相应的处理，然后事件继续冒泡往上传递； 既然事件是冒泡传递的，那可不可以让某个父节点统一处理事件，通过判断事件的发生地
事件冒泡及阻止 当一个元素接收到事件的时候，会把他接收到的事件传给自己的父级，一直到window，当然其传播的是事件，绑定的执行函数并不会传播，如果父级没有绑定事件函数，就算传递了事件，也不会有什么表现...事件冒泡的原因是事件源本身可能没有处理事件的能力，即处理事件的函数并未绑定在该事件源上。它本身并不能处理事件，所以需要将事件传播出去，从而能达到处理该事件的执行函数。...实例 当点击id为i3的时，浏览器会依次弹出3 2 1，这就是事件冒泡，此正方形处于叶节点上，对其操作的事件会向上进行冒泡，直到根节点。 事件冒泡而去执行上级节点绑定的事件，这时候就需要阻止事件的冒泡，w3c的方法是e.stopPropagation()，IE则是使用 window.event.cancelBubble...注意 不是所有的事件都能冒泡。以下事件不冒泡：blur、focus、load、unload。 事件解决方案方式在不同浏览器，可能是有所区别的，有些不支持捕获型方案，多数浏览器默认冒泡型方案。
4.option事件冒泡 马克-to-win：onChange事件option谈不到，只有select才谈onChange。只有onClick事件二者都有，才谈到冒泡。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
对象存储
腾讯会议
云直播
