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

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

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

<title>JS阻止链接跳转</title>

<script type="text/javascript">

function stopDefault( e ) {

if ( e && e.preventDefault )

   e.preventDefault();

    else

   window.event.returnValue = false; 

    return false;

}

</script>

</head>

<body>

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

<script type="text/javascript">

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

test.onclick = function(e) {

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

   stopDefault(e);

}

</script>

</body>

</html>

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

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

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

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xHTML1/DTD/xHTML1-transitional.dtd">

<HTML XMLns="http://www.w3.org/1999/xHTML" lang="gb2312">

<head>

<title> 阻止JS事件冒泡传递（cancelBubble 、stopPropagation）</title>

<meta name="keywords" content="JS,事件冒泡,cancelBubble,stopPropagation" />

<script>

function doSomething (obj,evt) {

 alert(obj.id);

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

 if (window.event) {

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

 } else {

  //e.preventDefault();

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

 }

}

</script>

</head>

<body>

<div id="parent1" onclick="alert(this.id)" style="width:250px;background-color:yellow">

  This is parent1 div.

 <div id="child1" onclick="alert(this.id)" style="width:200px;background-color:orange">

   This is child1.

 </div>

  This is parent1 div.

</div>

<br />

<div id="parent2" onclick="alert(this.id)" style="width:250px;background-color:cyan;">

  This is parent2 div.

 <div id="child2" onclick="doSomething(this,event);" style="width:200px;background-color:lightblue;">

   This is child2. Will bubble.

 </div>

  This is parent2 div.

</div>

</body>

</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. 树分治 poj 1741

    n k n个节点的一棵树 k是距离 求树上有几对点距离<=k; #include<stdio.h> #include<string.h> #include<algo ...

  2. Jquery.min.js 下载

    Jquery 下载:http://www.jq22.com/jquery-info122

  3. 100722C

    My birthday is coming up and traditionally I'm serving pie. Not just one pie, no, I have a number N ...

  4. 网络爬虫讲解（附java实现的实例）

    本文转载http://blog.csdn.net/luojinping/article/details/6870898 转载过来主要是防止想百度文库一样突然停止运作,导致很多文库丢失而无法找寻 网络蜘 ...

  5. 数据库开发基础-SQl Server 主键、外键、子查询（嵌套查询）

    主键 数据库主键是指表中一个列或列的组合,其值能唯一地标识表中的每一行.这样的一列或多列称为表的主键,通过它可强制表的实体完整性.当创建或更改表时可通过定义 PRIMARY KEY约束来创建主键.一个 ...

  6. iis 发布静态 html 代码

    参考地址: http://jingyan.baidu.com/article/c843ea0b7d0b7177921e4a68.html 操作步骤:1.在当前发布网站中建立虚拟目录 2.点击当前网站 ...

  7. java.lang.Exception: No runnable methods

    java.lang.Exception: No runnable methods at org.junit.runners.BlockJUnit4ClassRunner.validateInstanc ...

  8. xml序列化方式

    public static class MySerializeXmlHelper { static MySerializeXmlHelper() { } private static object _ ...

  9. BZOJ2120 数颜色（带修改莫队）

    本文版权归ljh2000和博客园共有,欢迎转载,但须保留此声明,并给出原文链接,谢谢合作. 本文作者:ljh2000作者博客:http://www.cnblogs.com/ljh2000-jump/转 ...

  10. poj 1269 线段相交/平行

    模板题 注意原题中说的线段其实要当成没有端点的直线.被坑了= = #include <cmath> #include <cstdio> #include <iostrea ...