所谓的事件有两种：监听事件和浏览器对特殊标签元素的默认行为事件。
监听事件：在节点上被监听的事件操作，如 select节点的change事件，a节点的click事件。
浏览器的默认事件：特定页面元素上带的功能，如a标签的href跳转，表单的提交事件。
执行监听事件在先，浏览器默认事件在后，所以可以在监听事件函数中，阻止浏览器的默认行为。
区别：preventDefault() 阻止浏览器默认事件  stopPropagation() 阻止事件的冒泡  return false; 阻止后续的所有行为
 <!DOCTYPE html>

 <html>

 <head>

     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

     <title></title>

     <script type="text/javascript">

     //preventDefault,比如<a href='http://www.baidu.com'>百度</a>，preventDefault的作用就是阻止它的默认行为

     function stoptDefault (e) {

         if(e&&e.preventDefault){

             e.preventDefault();

         }

         else{

             window.event.returnValue=false;

         }

         return false;

     }

     window.onload=function(){

         var test=document.getElementById("testLink");

         test.onclick=function(e){

         alert("我的连接地址是："+this.href+',但是我不跳转');

         stoptDefault(e);

         }

     }

     //stopPropagation 阻止js事件冒泡

     window.onload=function(){

         var parent1=document.getElementById("parent1");

         var childrent1=document.getElementById("childrent1");

         parent1.onclick=function(){

             alert(parent1.id)

         };

         childrent1.onclick=function(){

             alert(childrent1.id)

         };

     }

     function stopPro(obj,evt){

         var e=(evt)?evt:window.event;

         if(window.event){

             e.cancelBubble=true;//ie下的阻止冒泡

         }

         else{

             e.stopPropagation();//其他浏览器下的阻止冒泡

         }

     }

     window.onload=function(){

         var parent2=document.getElementById("parent2");

         var childrent2=document.getElementById("childrent2");

         parent2.onclick=function(){

             alert(parent2.id)

         };

         childrent2.onclick=function(e){

             stopPro(this,e);

             alert(childrent2.id)

         };

     }

     </script>

 </head>

 <body>

 <a href="http://www.baidu.com" id="testLink">百度</a>

 <br/>

 <div id="parent1" style="width:250px;background-color:yellow">

      <p>This is parent1 div.</p>

      <div id="childrent1" style="width:200px;background-color:orange">

          <p>This is Chilren1.</p>

      </div>

 </div>

 <br/>

 <div id="parent2" style="width:250px;background-color:cyan;">

      <p>This is parent2 div.</p>

      <div id="childrent2" style="width:200px;background-color:lightblue;">

           <p>This is childrent2. Will bubble.</p>

      </div>

 </div>

 </body>

 </html>

JS preventDefault ，stopPropagation ，return false的更多相关文章

  1. preventDefault()、stopPropagation()、return false 之间的区别

    “return false”之所以被误用的如此厉害,是因为它看起来像是完成了我们交给它的工作,浏览器不会再将我们重定向到href中的链接,表单也不会被继续提交,但这么做到底有什么不对呢? 可能在你刚开 ...

  2. js 阻止事件冒泡和默认行为 preventDefault、stopPropagation、return false

    preventDefault: preventDefault它是事件对象(Event)的一个方法,作用是取消一个目标元素的默认行为.既然是说默认行为,当然是元素必须有默认行为才能被取消,如果元素本身就 ...

  3. preventDefault()、stopPropagation()、return false 的区别

    preventDefault() e.preventDefault()阻止浏览器默认事件 stopPropagation() e.stopPropagation()阻止冒泡 return false ...

  4. e.preventDefault() e.stopPropagation()和return false的区别

    e.preventDefault(); //阻止事件的默认行为,比如a标签的转向,但不阻止事件的冒泡传播e.stopPropagation() //阻止事件的冒泡传播,但不阻止其默认行为returne ...

  5. How to correctly use preventDefault(), stopPropagation(), or return false; on events

    How to correctly use preventDefault(), stopPropagation(), or return false; on events I’m sure this h ...

  6. e.preventDefault()和e.stopPropagation()以及return false的作用和区别

    前段时间开发中,遇到一个父元素和子元素都有事件时,发现会出现事件冒泡现象,虽然知道ev.stopPropagation()和ev.preventDefault()其中一个是阻止事件冒泡和阻止默认行为, ...

  7. 在jquery中each循环中，要用return false代替break，return true代替continue。

    在jquery中each循环中,要用return false代替break,return true代替continue. $.each(data, function (n, value) { if(v ...

  8. 阻止事件冒泡两种方式：event.stopPropagation();和return false;

    jQuery提供了两种方式来阻止事件冒泡. 方式一:event.stopPropagation(); $("#div1").mousedown(function (event) { ...

  9. preventDefault, stopPropagation, return false -JS事件处理中的坑

    我们以一个文件上传ui重设计为例子来探讨这几个函数的区别: 其中的html代码如下: <div class="file-upload"> <input type= ...

随机推荐

  1. bzoj1026数位dp

    基础的数位dp 但是ce了一发,(abs难道不是cmath里的吗?改成bits/stdc++.h就过了) #include <bits/stdc++.h> using namespace ...

  2. 【BZOJ3156】防御准备 斜率优化DP

    裸题,注意:基本的判断(求Min还是Max),因为是顺着做的,且最后一个a[i]一定要取到,所以是f[n]. DP:f[i]=min(f[j]+(i-j-1)*(i-j)/2+a[i]) 依旧设x&g ...

  3. maven整理——初步

    最近用到了maven,查找了很多资料,写这篇博文是为了记录maven的使用学习,也方便自己日后好查找. 在这里引用http://www.cnblogs.com/dcba1112/archive/201 ...

  4. 串口计时工具Grabserial简介及修改(添加输入功能)

    Grabserial是Tim Bird用python写的一个抓取串口的工具,这个工具能够为收到的每一行信息添加上时间戳. 如果想对启动时间进行优化的话,使用这个工具就可以简单地从串口输出分析出耗时. ...

  5. ADO.NET的弹性连接控制[ADO.NET idle connection resiliency]

    ADO.NET连接SQL Server有时候联机会无故的中断 (例如闲置过久或是交易时间太长等因素),这时又要重新连接,在.NET Framework 4.5之前,这件事情要由开发人员自己依照ADO. ...

  6. ABP理论学习之数据过滤器

    返回总目录 本篇目录 介绍 预定义过滤器 关闭过滤器 开启过滤器 设置过滤器参数 定义自定义过滤器 其他ORM 介绍 软删除模式通常用于不会真正从数据库删除一个实体而是仅仅将它标记为"已删除 ...

  7. io.js入门（三）—— 所支持的ES6（下）

    (接上篇) 标准ES6特性 6. 新的String方法/New String methods 7. 符号/Symbols 8. 字符串模板/Template strings 新的String方法/Ne ...

  8. 剑指Offer面试题：7.旋转数组的最小数字

    一.题目:旋转数组的最小数字 题目:把一个数组最开始的若干个元素搬到数组的末尾,我们称之为数组的旋转.输入一个递增排序的数组的一个旋转,输出旋转数组的最小元素.例如数组{3,4,5,1,2}为{1,2 ...

  9. 使用CSS使内容垂直居中的N中方法。

    使用css+div使页面内容水平居中的方法大家并不陌生,那么如何使内容垂直居中呢? OK,下面进入正题,不如我们使用做高中数学题时经常用的思想:分情况讨论.   1.当待垂直居中的DIV高宽为已知时: ...

  10. IIS发布站点错误收集(持续更新)

    本文主要收集IIS在发布站点过程中遇到的错误,并提供解决办法.并亲测可行.如果您也在使用IIS发布站点的过程中遇到了一些问题,欢迎留言提问. (1.) HTTP错误500.21-Internal Se ...