JS preventDefault ,stopPropagation ,return false
来源:互联网 发布:支付宝软件下载 编辑:程序博客网 时间:2024/06/02 00:55
所谓的事件有两种:监听事件和浏览器对特殊标签元素的默认行为事件。监听事件:在节点上被监听的事件操作,如 select节点的change事件,a节点的click事件。浏览器的默认事件:特定页面元素上带的功能,如a标签的href跳转,表单的提交事件。执行监听事件在先,浏览器默认事件在后,所以可以在监听事件函数中,阻止浏览器的默认行为。区别:preventDefault() 阻止浏览器默认事件 stopPropagation() 阻止事件的冒泡 return false; 阻止后续的所有行为
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title></title> 6 <script type="text/javascript"> 7 //preventDefault,比如<a href='http://www.baidu.com'>百度</a>,preventDefault的作用就是阻止它的默认行为 8 function stoptDefault (e) { 9 if(e&&e.preventDefault){10 e.preventDefault();11 }12 else{13 window.event.returnValue=false;14 }15 return false;16 } 17 window.onload=function(){18 var test=document.getElementById("testLink");19 test.onclick=function(e){20 alert("我的连接地址是:"+this.href+',但是我不跳转');21 stoptDefault(e);22 }23 }24 //stopPropagation 阻止js事件冒泡25 26 window.onload=function(){27 var parent1=document.getElementById("parent1");28 var childrent1=document.getElementById("childrent1");29 parent1.onclick=function(){30 alert(parent1.id)31 };32 childrent1.onclick=function(){33 alert(childrent1.id)34 }; 35 }36 function stopPro(obj,evt){37 var e=(evt)?evt:window.event;38 if(window.event){39 e.cancelBubble=true;//ie下的阻止冒泡40 }41 else{42 e.stopPropagation();//其他浏览器下的阻止冒泡43 }44 }45 window.onload=function(){46 var parent2=document.getElementById("parent2");47 var childrent2=document.getElementById("childrent2");48 parent2.onclick=function(){49 alert(parent2.id)50 };51 childrent2.onclick=function(e){52 stopPro(this,e);53 alert(childrent2.id)54 }; 55 }56 </script>57 </head>58 <body>59 <a href="http://www.baidu.com" id="testLink">百度</a>60 <br/>61 <div id="parent1" style="width:250px;background-color:yellow">62 <p>This is parent1 div.</p>63 <div id="childrent1" style="width:200px;background-color:orange">64 <p>This is Chilren1.</p>65 </div>66 </div>67 <br/>68 <div id="parent2" style="width:250px;background-color:cyan;">69 <p>This is parent2 div.</p>70 <div id="childrent2" style="width:200px;background-color:lightblue;">71 <p>This is childrent2. Will bubble.</p>72 </div>73 </div>74 </body>75 </html>
0 0
- JS preventDefault ,stopPropagation ,return false
- stopPropagation, preventDefault 和 return false 的区别
- stopPropagation, preventDefault 和 return false 的区别
- stopPropagation, preventDefault 和 return false 的区别
- stopPropagation, preventDefault 和 return false 的区别
- stopPropagation, preventDefault 和 return false 的区别
- stopPropagation, preventDefault 和 return false 的区别
- stopPropagation, preventDefault 和 return false 的区别
- stopPropagation, preventDefault 和 return false 的区别
- stopPropagation, preventDefault 和 return false 的区别
- stopPropagation, preventDefault 和 return false 的区别
- stopPropagation, preventDefault 和 return false 的区别
- stopPropagation, preventDefault 和 return false 的区别
- stopPropagation, preventDefault 和 return false 的区别
- stopPropagation, preventDefault 和 return false 的区别
- stopPropagation, preventDefault 和 return false 的区别
- stopPropagation, preventDefault 和 return false 的区别
- stopPropagation, preventDefault 和 return false 的区别
- 晚自习好难集中注意力 自己又默默在纸上写了两个程序
- TypeEvaluator例子,备忘
- 牛客网刷题之数值的整数次方
- C和指针读书笔记(第十章)
- top命令查看每个逻辑cpu使用率
- JS preventDefault ,stopPropagation ,return false
- 【各大OJ】最短路专题
- 数据结构实验之链表二:逆序建立链表
- loadrunner录制脚本时报错Unable to connect to remote server: rc = -1 , le = 0
- Spring 配置使用 - Bean 作用域
- Oracle存储过程以及java调用
- 浙大 PAT b1052
- 欢迎使用CSDN-markdown编辑器
- C#_CombolBox添加数据的几种方法