zoukankan      html  css  js  c++  java
  • JS preventDefault ,stopPropagation ,return false

    所谓的事件有两种:监听事件和浏览器对特殊标签元素的默认行为事件。
    监听事件:在节点上被监听的事件操作,如 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="250px;background-color:yellow">
    62      <p>This is parent1 div.</p>
    63      <div id="childrent1" style="200px;background-color:orange">
    64          <p>This is Chilren1.</p>
    65      </div>
    66 </div>
    67 <br/>
    68 <div id="parent2" style="250px;background-color:cyan;">
    69      <p>This is parent2 div.</p>
    70      <div id="childrent2" style="200px;background-color:lightblue;">
    71           <p>This is childrent2. Will bubble.</p>
    72      </div>
    73 </div>
    74 </body>
    75 </html>
  • 相关阅读:
    Centos 卸载openjdk
    Hadoop安装之Hive集成与mysql安装
    Hadoop安装-Spark Windows 环境 pycharm开发环境搭建
    Hadoop安装—Spark安装
    Hadoop安装-伪分布式
    Hadoop安装之JDK在Centos虚拟机中安装
    SQL server 数据库调用远程数据库存储过程的实现方法
    以梦为马,铸就美好人生
    kettle实战演练——批量解压有密码的rar文件,并生成xml文件
    Linux diff命令
  • 原文地址:https://www.cnblogs.com/lvyongbo/p/4688801.html
Copyright © 2011-2022 走看看