本篇文章主要是对js中的preventDefault与stopPropagation进行了介绍，需要的朋友可以过来参考下，希望对大家有所帮助

首先讲解一下js中preventDefault和stopPropagation两个方法的区别：
preventDefault方法的起什么作用呢？我们知道比如<a href="http://www.baidu.com">百度</a>,这是html中最基础的东西，起的作用就是点击百度链接到http://www.baidu.com,这是属于<a>标签的默认行为，而preventDefault方法就是可以阻止它的默认行为的发生而发生其他的事情。看一段代码大家就明白了：

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>JS阻止链接跳转</title>
  6. <script type="text/javascript">
  7. function stopDefault( e ) {
  8. if ( e && e.preventDefault )
  9.    e.preventDefault();
  10.     else
  11.    window.event.returnValue = false; 
  12.  
  13.     return false;
  14. }
  15. </script>
  16. </head>
  17. <body>
  18. <a href="http://www.baidu.com" id="testLink">百度</a>
  19. <script type="text/javascript">
  20. var test = document.getElementById('testLink');
  21. test.onclick = function(e) {
  22.    alert('我的链接地址是：' + this.href + ', 但是我不会跳转。');
  23.    stopDefault(e);
  24. }
  25. </script>
  26. </body>
  27. </html>

此时点击百度链接，不会打开http://www.baidu.com，而只是弹出一个alert对话框。

preventDefault方法讲解到这里，stopPropagation方法呢？讲stopPropagation方法之前必需先给大家讲解一下js的事件代理。

事件代理用到了两个在JavaSciprt事件中常被忽略的特性：事件冒泡以及目标元素。当一个元素上的事件被触发的时候，比如说鼠标点击了一个按钮，同样的事件将会在那个元素的所有祖先元素中被触发。这一过程被称为事件冒泡；这个事件从原始元素开始一直冒泡到DOM树的最上层。对任何一个事件来说，其目标元素都是原始元素，在我们的这个例子中也就是按钮。目标元素它在我们的事件对象中以属性的形式出现。使用事件代理的话我们可以把事件处理器添加到一个元素上，等待事件从它的子级元素里冒泡上来，并且可以很方便地判断出这个事件是从哪个元素开始的。

stopPropagation方法就是起到阻止js事件冒泡的作用，看一段代码。

  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xHTML1/DTD/xHTML1-transitional.dtd">
  2. <HTML XMLns="http://www.w3.org/1999/xHTML" lang="gb2312">
  3. <head>
  4. <title> 阻止JS事件冒泡传递（cancelBubble 、stopPropagation）</title>
  5. <meta name="keywords" content="JS,事件冒泡,cancelBubble,stopPropagation" />
  6. <script>
  7. function doSomething (obj,evt) {
  8.  alert(obj.id);
  9.  var e=(evt)?evt:window.event;
  10.  if (window.event) {
  11.   e.cancelBubble=true;// ie下阻止冒泡
  12.  } else {
  13.   //e.preventDefault();
  14.   e.stopPropagation();// 其它浏览器下阻止冒泡
  15.  }
  16. }
  17. </script>
  18. </head>
  19. <body>
  20. <div id="parent1" onclick="alert(this.id)" style="width:250px;background-color:yellow">
  21.   This is parent1 div.
  22.  <div id="child1" onclick="alert(this.id)" style="width:200px;background-color:orange">
  23.    This is child1.
  24.  </div>
  25.   This is parent1 div.
  26. </div>
  27. <br />
  28. <div id="parent2" onclick="alert(this.id)" style="width:250px;background-color:cyan;">
  29.   This is parent2 div.
  30.  <div id="child2" onclick="doSomething(this,event);" style="width:200px;background-color:lightblue;">
  31.    This is child2. Will bubble.
  32.  </div>
  33.   This is parent2 div.
  34. </div>
  35. </body>
  36. </HTML>

大家运行一下上面的代码就明白了。

js中的preventDefault与stopPropagation详解的更多相关文章

  1. JS中的函数节流throttle详解和优化

    JS中的函数节流throttle详解和优化在前端开发中,有时会为页面绑定resize事件,或者为一个页面元素绑定拖拽事件(mousemove),这种事件有一个特点,在一个正常的操作中,有可能在一个短的 ...

  2. Node.js中环境变量process.env详解

    Node.js中环境变量process.env详解process | Node.js API 文档http://nodejs.cn/api/process.html官方解释:process 对象是一个 ...

  3. js中的preventDefault和stopPropagation

    首先讲解一下js中preventDefault和stopPropagation两个方法的区别:      preventDefault方法的起什么作用呢?我们知道比如<a href=" ...

  4. 现代JS中的流程控制：详解Callbacks 、Promises 、Async/Await

    JavaScript经常声称是_异步_.那是什么意思?它如何影响发展?近年来这种方法有何变化? 请思考以下代码: result1 = doSomething1(); result2 = doSomet ...

  5. js中 javascript:void(0) 用法详解

    点击链接不做任何事情: <a href="#" onclick="return false">test</a> <a href=& ...

  6. js中caller和callee属性详解

    一.caller属性返回一个对函数的引用,该函数调用了当前函数.functionName.callerfunctionName 对象是所执行函数的名称.说明对于函数来说,caller 属性只有在函数执 ...

  7. Javascript（JS)中的大括号{}和中括号[]详解

    一.{ } 大括号,表示定义一个对象,大部分情况下要有成对的属性和值,或是函数. 如:var LangShen = {"Name":"Langshen",&qu ...

  8. php_DWZ-JUI中碰到的问题解决方法详解(thinkphp+dwz)

    原文:php_DWZ-JUI中碰到的问题解决方法详解(thinkphp+dwz) 折腾了两天,dwz删除后,数据不能自动刷新,解决方案,直接看图  . 1. 删除.修改状态后无法刷新记录: 在dwz. ...

  9. 前端后台以及游戏中使用Google Protocol Buffer详解

    前端后台以及游戏中使用Google Protocol Buffer详解 0.什么是protoBuf protoBuf是一种灵活高效的独立于语言平台的结构化数据表示方法,与XML相比,protoBuf更 ...

随机推荐

  1. 【HDU 1007】Quoit Design

    http://acm.hdu.edu.cn/showproblem.php?pid=1007 最近欧式距离模板题. 用分治大法(分治的函数名用cdq纯属个人习惯_(:з」∠)_) 一开始狂M. 后来判 ...

  2. lightoj 1370 欧拉函数

    A - Bi-shoe and Phi-shoe Time Limit:2000MS     Memory Limit:32768KB     64bit IO Format:%lld & % ...

  3. The prefix "tx" for element "tx:annotation-driven " is not bound

    The prefix "tx" for element "tx:advice" is not bound 这个错误的原因很简单是: 我们在定义申明AOP的时候. ...

  4. 725C

    找出连通块,然后找出颜色最大的,用总数减去 #include<iostream>#include<map>#include<cstring>#include< ...

  5. selenium 3 对我们的影响

    The major change in Selenium 3.0 is we're removing the original Selenium Core implementation and rep ...

  6. 浅谈jQuery页面的滚动位置scrollTop、scrollLeft

    Web页面常常比显示该页面的浏览器窗口还要大,因为Web文档具有很多内容,往往会导致页面比浏览器还要高,有时候甚至还要宽,这迫使访问者通过滚动来查看整个页面(如图10-8所示).当访问者滚动页面的时候 ...

  7. VS提示“项目文件" "已被重命名或已不在解决方案中”的解决办法 .

    多个项目的源码在一个源代码中,其中,有一个源代码废弃不可用了.删除后,再次生成解决方案时出现了问题“项目文件" "已被重命名或已不在解决方案中”. 解决方法是: 1.找到主项目,右 ...

  8. Bzoj4300 绝世好题

    Time Limit: 1 Sec  Memory Limit: 128 MBSubmit: 1325  Solved: 722 Description 给定一个长度为n的数列ai,求ai的子序列bi ...

  9. CentOS安装MongoDB

    1. touch /etc/yum.repos.d/mongodb.repo vi /etc/yum.repos.d/mongodb.repo [mongodb]        name=MongoD ...

  10. POJ 2559 Largest Rectangle in a Histogram(单调栈）

    传送门 Description A histogram is a polygon composed of a sequence of rectangles aligned at a common ba ...