阻止冒泡 | 易学教程

冒泡事件-捕获事件-阻止事件

阅读更多关于冒泡事件-捕获事件-阻止事件

<div class="div1"> father <div class="div2">son</div> </div> View Code 创建父子盒子 <style> .div1{ width: 200px; height: 200px; background-color: lightblue; } .div2{ width: 100px; height: 100px; background-color:lightcoral; } </style> View Code 创建两个盒子的样式直接上图冒泡事件代码: <script> var div1 = document.querySelector('.div1'); var div2 = document.querySelector('.div2'); div1.addEventListener('click', function () { console.log(1); })　　　　 div2.addEventListener('click', function (e) { console.log(2); }); </script> div1代表父盒子 div2代表子盒子当子盒子被点击时会先处理自己，搞完自己就产生了冒泡==>就是向上查找直到document结束为什么不是html而是document?

关于DOM事件流、DOM0级事件与DOM2级事件

阅读更多关于关于DOM事件流、DOM0级事件与DOM2级事件

一、DOM 事件模型 DOM 事件模型包括捕获和冒泡，捕获是从上往下到达目标元素，冒泡是从当前元素，也就是目标元素往上到 window 二、流流的概念，在现今的 JavaScript 中随处可见。比如说 React 中的单向数据流，Node 中的流，还有 DOM 事件流，都是流的一种生动体现。至于流的具体概念，用术语说流是对输入输出设备的抽象。以程序的角度说，流是具有方向的数据。三、事件流浏览器在为当前页面与用户做交互的过程中，比如点击鼠标左键，会出现这个左键是怎么传到页面上，还有怎么响应的问题。事件流所描述的就是从页面中接受事件的顺序，事件流分为两种：事件冒泡（主流）和事件捕获 1、事件冒泡事件开始时由具体元素接收，然后逐级向上传播到父元素举个例子： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Event Bubbling</title> </head> <body> <button id="clickMe">Click Me</button> </body> </html> 我们给 button 和它的父元素，加入点击事件 var button = document.getElementById('clickMe'); button.onclick = function

阻止小程序遮罩层下方图层滚动

阅读更多关于阻止小程序遮罩层下方图层滚动

原因是因为：　　touchmove事件冒泡；解决方案: 　　阻止遮罩层冒泡，在小程序里面利用catch+事件名就可以阻止冒泡，　　所以在遮罩层填上事件　　　　catchtouchmove="preventdefault" 　　小程序1.5.0后可以写上　　　　capture-catch:touchmove="preventdefault" 完美哈哈；来源： https://www.cnblogs.com/wang-xx/p/11405537.html

【JS教程27】事件冒泡

阅读更多关于【JS教程27】事件冒泡

什么是事件冒泡在一个对象上触发某类事件（比如单击onclick事件），如果此对象定义了此事件的处理程序，那么此事件就会调用这个处理程序，如果没有定义此事件处理程序或者事件返回true，那么这个事件会向这个对象的父级对象传播，从里到外，直至它被处理（父级对象所有同类事件都将被激活），或者它到达了对象层次的最顶层，即document对象（有些浏览器是window）。事件冒泡的作用事件冒泡允许多个操作被集中处理（把事件处理器添加到一个父级元素上，避免把事件处理器添加到多个子级元素上），它还可以让你在对象层的不同级别捕获事件。阻止事件冒泡事件冒泡机制有时候是不需要的，需要阻止掉，通过 event.stopPropagation() 来阻止 $(function(){ var $box1 = $('.father'); var $box2 = $('.son'); var $box3 = $('.grandson'); $box1.click(function() { alert('father'); }); $box2.click(function() { alert('son'); }); $box3.click(function(event) { alert('grandson'); event.stopPropagation(); }); $(document).click

javascript高级课程-1

阅读更多关于 javascript高级课程-1

绑定过个事件的难题二级事件绑定捕捉与冒泡实测捕捉与冒泡停止传播行为与阻止行为绑定多个事件的难题：（用途：前端特效、服务端需要监看点击次数因此两次绑定，仅仅后面的生效问题）代码如下： <a href="#" id="a" >a</a> </body> <script type="text/javascript"> var a = document.getElementById("a"); a.onclick=function(){ alert("aa"); } a.onclick=function(){ alert("bb"); } </script> 最终弹出bb这是因为覆盖掉前面的onclick属性的值高级绑定事件 a.addEventListener('click',function(){ alert("aa"); }) a.addEventListener('click',function(){//第一个参数绑定的事件、第二个参数为函数、第三个是冒泡还是捕捉 alert("bb"); }) a.removeEventListener('click',function(){//删除事件第一个参数是事件第二个是某个事件的某个值 alert("aa"); }); <!DOCTYPE html> <html> <head> <title></title>

Jquery 事件执行两次

阅读更多关于 Jquery 事件执行两次

js(jquery)的on绑定点击事件执行两次的解决办法—不是事件绑定而是事件冒泡阻止冒泡的方法并不止 return false 这一种，还有event.stopPropagation()，这两种方法是有区别的，简单来说： event.stopPropagation()会阻止事件往上冒泡，但是并不阻止事件本身； return false 则是既阻止了事件往上冒泡又阻止了事件本身。修改前 $(".project_select").change(function () { var checkText=$(".project_select").find("option:selected").text(); //alert(checkText); if (checkText == '请选择') { return false; } }); 修改后 $(".project_select").unbind('change').change(function () { var checkText=$(".project_select").find("option:selected").text(); //alert(checkText); if (checkText == '请选择') { return false; } }); 来源： http://www.cnblogs.com

微信小程序（16）-- bindtap,catchtap事件绑定的区别

阅读更多关于微信小程序（16）-- bindtap,catchtap事件绑定的区别

bindtap,catchtap事件绑定的区别，这里就涉及冒泡事件了。bind事件绑定不会阻止冒泡事件向上冒泡，catch事件绑定可以阻止冒泡事件向上冒泡。 logs.wxml <view class="view1" bindtap="view1"> view1 <view class="view2" bindtap="view2"> view2 <view class="view3" catchtap="view3">view3</view> </view> </view> logs.js view1: function () { console.log("---view1 bindtap click") }, view2: function () { console.log("--view2 bindtap click") }, view3: function () { console.log("-view3 catchtap click ") } 点击view3 -view3 catchtap click 点击view2 --view2 bindtap click ---view1 bindtap click 点击view1 ---view1 bindtap click 来源： https://www.cnblogs.com/juewuzhe/p/9327869.html

微信小程序bindtap与catchtap的区别

阅读更多关于微信小程序bindtap与catchtap的区别

1、什么是事件　　(1) 事件是视图层到逻辑层的通讯方式。　　(2) 事件可以将用户的行为反馈到逻辑层进行处理。　　(3) 事件可以绑定在组件上，当达到触发事件，就会执行逻辑层中对应的事件处理函数。　　(4) 事件对象可以携带额外信息，如 id,dataset,touches 2、如何使用事件　　(1) 简单来说就是将事件绑定到组件上面，bindtap和catchtap都属于点击事件，绑定了之后点击组件可以触发这个函数。　　(2) 函数tapName会接受一个参数event，event里面存储了一些函数调用的上下文信息　　(3) 标签元素 <view id="tapTest" data-hi="WeChat" bindtap="tapName"> Click me! </view> 　　(4) 绑定事件 Page({ tapName: function(event) { console.log(event) } }) 3、bindtap和catchtap的区别　　(1) 相同点：首先他们都是作为点击事件函数，就是点击时触发。在这个作用上他们是一样的，可以不做区分。　　(2) 不同点：他们的不同点主要是bindtap是冒泡的，catchtap是非冒泡的。 4、小程序中事件分为冒泡事件和非冒泡事件。　　(1) 本文以冒泡事件tap（手指触摸后马上离开

阻止子元素继承父元素事件

阅读更多关于阻止子元素继承父元素事件

DOM事件标准定义了两种事件流，分别是捕获和冒泡。默认情况下，事件使用冒泡事件流，不使用捕获事件流。然而，在Firefox和Safari里，你可以显式的指定使用捕获事件流，方法是在注册事件时传入useCapture参数，将这个参数设为true。冒泡事件流当事件在某一DOM元素被触发时，例如用户在客户名字节点上点击鼠标，事件将跟随着该节点继承自的各个父节点冒泡穿过整个的DOM节点层次，直到它遇到依附有该事件类型处理器的节点，此时，该事件是onclick事件。在冒泡过程中的任何时候都可以终止事件的冒泡，在遵从W3C标准的浏览器里可以通过调用事件对象上的stopPropagation()方法，在Internet Explorer里可以通过设置事件对象的cancelBubble属性为true。如果不停止事件的传播，事件将一直通过DOM冒泡直至到达文档根。捕获事件流事件的处理将从DOM层次的根开始，而不是从触发事件的目标元素开始，事件被从目标元素的所有祖先元素依次往下传递。在这个过程中，事件会被从文档根到事件目标元素之间各个继承派生的元素所捕获，如果事件监听器在被注册时设置了useCapture属性为true,那么它们可以被分派给这期间的任何元素以对事件做出处理；否则，事件会被接着传递给派生元素路径上的下一元素，直至目标元素。事件到达目标元素后，它会接着通过DOM节点再进行冒泡

订阅阻止冒泡