首先讲解一下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">
<p>This is parent1 div.</p>
<div id="child1" onclick="alert(this.id)" style="width:200px;background-color:orange">
<p>This is child1.</p>
</div>
<p>This is parent1 div.</p>
</div>
<br />
<div id="parent2" onclick="alert(this.id)" style="width:250px;background-color:cyan;">
<p>This is parent2 div.</p>
<div id="child2" onclick="doSomething(this,event);" style="width:200px;background-color:lightblue;">
<p>This is child2. Will bubble.</p>
</div>
<p>This is parent2 div.</p>
</div>
</body>
</HTML>
大家运行一下上面的代码就明白了。
转载自：http://gbtan.iteye.com/blog/664908
分享到：
相关推荐
首先讲解一下js中preventDefault和stopPropagation两个方法的区别：preventDefault方法的起什么作用呢？我们知道比如百度,这是html中最基础的东西，起的作用就是点击百度链接到http://www.baidu.com,这是属于标签的...
preventDefault stopPropagation 详解，很有用的
// 列描述对象 ,包含一个数组，数组中每一个对象说明一个列编辑对象和相关处理 column : [ { // 列名 name : 'areaName', // 编辑类型 当前支持三种编辑方式text(文本框)date(日期型)select...
堆栈溢出将建议您在代码上撒上event.stopPropagation() （可能还可以使用event.preventDefault()来达到很好的效果），但这是一种反模式。 当您想要的只是一个专用标记时， stopPropagation是一个断头台。 ...
在事件处理程序中调用 event.preventDefault() 或 event.stopPropagation() 是非常常见的需求。尽管我们可以在 methods 中轻松实现这点，但更好的方式是：methods 只有纯粹的数据逻辑，而不是去处理 DOM 事件细节。 ...
JavaScript权威指南 犀牛书 Chapter 1. Introduction to JavaScript Section 1.1. JavaScript Myths Section 1.2. Versions of JavaScript Section 1.3. Client-Side JavaScript Section 1.4. JavaScript ...
有些时候可以使用 e.stopPropagation(); e.preventDefault();来阻止事件冒泡，和默认事件的执行。但不能阻止事件的追加。 什么情况下要阻止事件的追加呢？ 比如： 点击“结账”，这样的操作时，结账本身有自己的事件...
js阻止冒泡 在阻止冒泡的过程中，W3C和IE采用的不同的方法，那么我们必须做以下兼容。 代码如下: function stopPro(evt){ var e = evt || window.event; //returnValue如果设置了该属性，它的值比事件句柄的返回值...
Vue.js 为 v-on 提供了事件修饰符来处理 DOM 事件细节，如：event.preventDefault() 或 event.stopPropagation()。Vue.js通过由点(.)表示的指令后缀来调用修饰符。 <!-- 阻止单击事件冒泡 --> ...
通常，我们会使用event.stopPropagation()和event.preventDefault()来防止密钥冒泡，但是我们实际上应该创建一个上下文堆栈，并告诉我们的代码我们所处的上下文以及接下来将接收的上下文未处理的事件。 入门 安装 ...
dom 事件对象 type 属性用于获取事件对象， target属性 用于获取事件目标，stopPropagation()方法 阻止事件冒泡 preventDefault阻止事件的默认行为 IE中的事件对象 type 属性 用于获取事件对象， srcElement属性 ...
用js的event可以用来阻止input,select,checkbox的默认事件，如 event.preventDefault() event.stopPropagation() 其实用纯CSS也能实现，如 input { pointer-events: none; } 然后用CSS把input变灰即可，50%透明度...
事件绑定兼容性问题:在低版本IE中(IE 6/7/8)不支持addEventListener和removeEventListener, 在低版本IE中可以使用： attachEvent(事件名,事件函数) 绑定事件 detachEvent 取消事件 注意：事件名 包含on前缀 两...
事件助手一组 utils 和 ES7 装饰器，可帮助您处理事件。安装 npm install --save event-helpers例子以下是使用事件助手提供的一些实用程序功能的几个示例。停止传播前： $ ( '#mybutton' ) . on ( 'click' , ...
a.preventDefault=function(){this.defaultPrevented=this.cancelable&&!0},a.stopPropagation=function(){this.propagationStopped=!0},a.stopImmediatePropagation=function(){this.immediatePropagationStopped=...
委托流 简单的流DOM事件委托 例子 var events = require ( 'dom-delegation-stream' ) ... preventDefault <boolean> ：将在所有匹配的事件上调用preventDefault() 。 默认为false 。 stopPropagation <b
API： 事件处理程序接收目标元素，因为它是this上下文事件处理程序接收事件，因为它是第一个参数event对象分配了.target event对象具有.preventDefault()方法event对象有.stopPropagation()方法安装 $ component ...