阻止冒泡 | 易学教程

JS 事件捕获、事件冒泡以及事件委托图文详解

阅读更多关于 JS 事件捕获、事件冒泡以及事件委托图文详解

核心： JS的点击事件会先一层一层捕获到target元素，然后再从target元素沿着路径一层层向上冒泡最重要的就是理解它的路径测试界面：这里先展示一下路径的形式（以点击测试界面的son为例子）通过这个path帮助我们理解事件捕获以及事件冒泡：当我们点击了son之后，浏览器先从window一层一层向下找，最终找到我们的son，这个阶段称为事件捕获阶段，捕获结束后，就从target son 一层一层向window冒泡，这个阶段称之为事件冒泡。我们默认的监听事件都是在冒泡阶段执行的，要想在捕获阶段执行则需要给监听函数的第三个参数赋为true。从图中我们也可以看到cancleBubble && cancelable && defaultPrevent cancelable的truith代表我们是否可以取消冒泡 cancleBubble的truith代表我们是否取消了冒泡 defaultPrevent的truith代表我们是否禁止默认行为 (题外话，最新版浏览器基本都支持passive，在passive为true的监听事件里调用preventDefault会失效，而且在监听touchstart以及touchmove里默认都是passive:true，所以想要在监听函数里调用preventDefault()禁止页面滚动需要addEventListener的第三个参数为

事件处理模型——事件冒泡、捕获

阅读更多关于事件处理模型——事件冒泡、捕获

事件冒泡（不绑定事件处理函数一样会发生冒泡事件）结构上（非视觉上）嵌套关系的元素，会存在事件冒泡的功能，即同一个事件，自子元素冒泡向父元素（自底向上） <div class="first" style="width: 300px; height: 300px; background-color: red;"> <div class="secend" style="width: 200px; height: 200px; background-color: yellow;"> <div class="end" style="width: 100px; height: 100px; background-color: green;"></div> </div> </div> <script> var first = document.getElementsByClassName("first")[0]; var secend = document.getElementsByClassName("secend")[0]; var end = document.getElementsByClassName("end")[0]; first.onclick=function(){ console.log("123"); }; secend.onclick=function(){

阻止事件冒泡和浏览器的默认行为

阅读更多关于阻止事件冒泡和浏览器的默认行为

javascript 1.阻止事件冒泡,使成为捕获型事件触发机制. function stopBubble(e) { //如果提供了事件对象，则这是一个非IE浏览器 if ( e && e.stopPropagation ) //因此它支持W3C的stopPropagation()方法 e.stopPropagation(); else //否则，我们需要使用IE的方式来取消事件冒泡 window.event.cancelBubble = true; } 2.当按键后,不希望按键继续传递给如HTML文本框对象时,可以取消返回值.即停止默认事件默认行为. //阻止浏览器的默认行为 function stopDefault( e ) { //阻止默认浏览器动作(W3C) if ( e && e.preventDefault ) e.preventDefault(); //IE中阻止函数器默认动作的方式 else window.event.returnValue = false; return false; } jQUERY jQuery事件中 return false等效于同时调用e.preventDefault()和e.stopPropagation() 即除了阻止默认行为之外，还会阻止事件冒泡。如果手上有一份jquery源代码的话，可查看其中有如下代码： if (ret==

面试准备 DOM

阅读更多关于面试准备 DOM

基本概念：Dom事件的级别 Dom0 级别 element.onclick=function() {} Dom1 没有制定事件相关的 Dom2 element.addEventListener("click" function() {} , false//捕获还是冒泡) Dom3 element.addEventListener("keyup" function() {} , false//捕获还是冒泡) 新增鼠键盘事件 DOM事件模型：捕获冒泡捕获：从上往下冒泡：当前元素往上 DOM事件流浏览器在为当前页面与用户交互比如鼠标左键响应如何传到页面响应 1.事件通过捕获 2.目标元素（目标阶段） 3.上传到window对象（冒泡） DOM事件捕获的具体流程第一个接受到事件的对象 window -----document-----html标签----body---父级元素--子---目标元素 Event对象的常见应用 // 1事件原理 2怎么注册监听 3响应event常见应用 event.preventDefault()阻止默认事件 event.stopPropagation() 阻止冒泡 event。stopimmediatePropagation（）两个click事件 A中注册这个阻止Bclick事件 event.currentTarget /

DOM事件流的三个阶段

阅读更多关于 DOM事件流的三个阶段

事件发生时会在元素节点之间按照特定的顺序传播，这个传播过程即DOM事件流。 DOM事件流分为三个阶段，分别为：捕获阶段：事件从Document节点自上而下向目标节点传播的阶段；目标阶段：真正的目标节点正在处理事件的阶段；冒泡阶段：事件从目标节点自上而下向Document节点传播的阶段。捕获阶段： 1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="UTF-8"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 8 <title>Document</title> 9 <style> 10 .father { 11 overflow: hidden; 12 width: 300px; 13 height: 300px; 14 margin: 100px auto; 15 background-color: pink; 16 text-align: center; 17 } 18 19 .son { 20 width: 200px; 21 height: 200px; 22 margin:

js 默认事件取消

阅读更多关于 js 默认事件取消

防止事件捕获和冒泡　　　　：子类的事件会会发父类相同类型的事件，　　　　　　 w3c 标准 window.event.stopPropagation也是事件对象(Event)的一个方法，作用是阻止目标元素的冒泡事件，但是会不阻止默认行为。　　　　　　IE则是使用window.event..cancelBubble = true 　　2.阻止默认事件（a标签的跳转，，type=submit 提交当Event 对象的 cancelable为false时，表示没有默认行为，这时即使有默认行为，调用preventDefault也是不会起作用的。）　　　　 w3c的方法是 window.event. preventDefault()，　　　　IE则是使用 window.event. .returnValue = false; 　　　　3.jQuery用法　　　　阻止默认事件 return false 不停止冒泡　　　　　　 <a href="http://www.baidu.com" onclick="return false">llll</a> 　　　　 jQuery 　return false; 阻止默认事件和事件冒泡　　　 $("#testC").on('click',function(){ 　　　　　　return false; 　　　 }); 来源：

Jquery的事件和动画

阅读更多关于 Jquery的事件和动画

4.1JQuery中的事件 4.1.1 简写方式三种方式等效： $(document).ready(function(){}) $(function(){}) $().ready(function(){}) 4.1.2事件的绑定在文档装载完成时，如果打算为元素绑定事件来完成某些操作，则可以使用bind（）方法来匹配元素进行特定事件的绑定 bind( type [ ，data]，fn)；第一个参数是事件类型：blur、focus、load、resize、scroll；或者是自定义的名称第二个参数是可选参数，作为event.data 属性值传递给事件对象的额外数据对象第三个参数则是用来绑定处理函数。 <style type="text/css"> .content{ display: none; } </style></head><body> <div id="panel"> <h5 class="head">什么是Jquery</h5> <div class="content">Jquery是 </div> </div> <script> $(function () { $(".head").bind("click",function (){ $(this).next("div.content").show(); }) }) </script></body>加强效果

冒泡、捕获

阅读更多关于冒泡、捕获

1 var father = document.getElementById('father'); 2 var btn = document.getElementById('btn'); 3 4 btn.addEventListener('click', function (event) { 5 // 阻止冒泡 6 if(event && event.stopPropagation){ // w3c标准 7 event.stopPropagation(); 8 }else{ // IE系列 IE 678 9 event.cancelBubble = true; 10 } 11 12 alert('点击了按钮'); 13 }); 14 15 father.addEventListener('click', function (ev) { 16 // 阻止冒泡 17 if(event && event.stopPropagation){ // w3c标准 18 event.stopPropagation(); 19 }else{ // IE系列 IE 678 20 event.cancelBubble = true; 21 } 22 23 alert('点击了父标签'); 24 }); 25 26 document.addEventListener('click', function

JavaScript基础-----事件冒泡和阻止

阅读更多关于 JavaScript基础-----事件冒泡和阻止

1.事件冒泡：由里向外依次执行，这就是所谓的事件冒泡（从里向外进行传播）；摘自原作者的例子： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>事件冒泡</title> <style> .one{ width:400px; height:100px; border:1px solid #333; } .two{ height:35px; line-height:35px; padding-left:15px; border:1px solid red; } .three{ padding:10px; background-color: green; border:1px solid #999; cursor:pointer; } </style> <script src = "http://code.jquery.com/jquery-1.11.2.min.js"></script> <script> $(function(){ $(".one").click(function(event) { alert($(this).text()); }); $(".two").click(function(event) { alert($(this).text()); }); $(".three").click

常见的一些浏览器兼容问题

阅读更多关于常见的一些浏览器兼容问题

1、阻止冒泡的方法。 function stopBubble(e){ e = e || window.event; if(e.stopPropagation){ e.stopPropagation(); //W3C阻止冒泡方法 }else { e.cancelBubble = true; //IE11一下阻止冒泡方法 } } 2、IE8只支持 jquery 1.9.x版本。   3、让IE6~8支持部门css3选择器：使用 selectivizr（百度搜） < script type ="text/javascript" src ="[JS library]" ></ script > <!-- [if (gte IE 6)&(lte IE 8)]> <script type="text/javascript" src="selectivizr.js"></script> <noscript><link rel="stylesheet" href="[fallback css]" /></noscript> <!

订阅阻止冒泡