js中的preventDefault与stopPropagation详解

1. preventDefault:

　　比如<a href="http://www.baidu.com">百度</a>,这是html中最基础的东西，起的作用就是点击百度链接到http://www.baidu.com,这是属于<a>标签的默认行为;preventDefault方法就是可以阻止它的默认行为的发生而发生其他的事情;

 1 <!DOCTYPE html>
 2 <html>
 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对话框

2. stopPropagation :

　　起到阻止js事件冒泡的作用;

　　2.1 讲stopPropagation方法之前必需先给大家讲解一下js的事件代理:

　　(1) 事件代理用到了两个在JavaSciprt事件中常被忽略的特性：事件冒泡以及目标元素

　　事件冒泡: 当一个元素上的事件被触发的时候，比如说鼠标点击了一个按钮，同样的事件将会在那个元素的所有祖先元素中被触发。这一过程被称为事件冒泡;这个事件从原始元素开始一直冒泡到DOM树的最上层.

　　目标元素: 对任何一个事件来说，其目标元素都是原始元素，在我们的这个例子中也就是按钮。目标元素它在我们的事件对象中以属性的形式出现。使用事件代理的话我们可以把事件处理器添加到一个元素上，等待事件从它的子级元素里冒泡上来，并且可以很方便地判断出这个事件是从哪个元素开始的。

　　下面看一段代码：

<!DOCTYPE html>
<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://www.jb51.net/article/46379.htm

转载于:https://www.cnblogs.com/max-tlp/p/8257688.html

js中的preventDefault与stopPropagation详解相关推荐

js中的preventDefault与stopPropagation详解（转）
先讲解一下js中preventDefault和stopPropagation两个方法的区别: preventDefault方法的起什么作用呢?我们知道比如<a href="http:/ ...
js中toString()和String()区别详解
转载自 js中toString()和String()区别详解我们知道String()与 .toString()都是可以转换为字符串类型,但是String()与 .toString()的还是有区别的 ...
vue在created调用点击方法_vue.js中created方法的使用详解
这次给大家带来vue.js中created方法的使用详解,使用vue.js中created方法的注意事项有哪些,下面就是实战案例,一起来看一下. 这是它的一个生命周期钩子函数,就是一个vue实例被生成 ...
JS中的日期和时间详解
JS中的日期和时间详解关于Date()构造函数简单实例用Date()构造函数创建时钟关于Date()构造函数 Date()构造函数是javascript的核心语言部分,用来创建表示时间和日期的 ...
js中转换json对象方法详解及使用案例
JSON(JavaScript Object Notation)是一种轻量级的数据交换格式.因为采用独立于语言的文本格式,也使用了类似于C语言家族的习惯,拥有了这些特性使使JSON称为理想的数据交换语 ...
php模拟红绿灯,JS 中使用Promise 实现红绿灯详解
本文通过实例代码给大家介绍了JS 中使用Promise 实现红绿灯效果,在文中给大家介绍了一个promise用法例子,需要的朋友可以参考下,希望能帮助到大家. 要求使用promise 实现红绿灯颜色的 ...
行为模型实例 php,JS中事件模型的实例详解
之前对事件模型还是比较清楚的,许多概念都清晰映射在脑海中.工作之后,一方面使用的局限性,二是习惯于用框架中的各种事件监听方式,简单即方便,久而久之,事件的一些概念开始淡出记忆中,就像我现在已经开始 ...
JS中的事件委托 / 代理详解
[前言] 事件委托/代理是前端面试的经典题型,要去找工作的小伙伴看看还是有帮助的 [主体] 概述: 那什么叫事件委托呢?它还有一个名字叫事件代理,JavaScript高级程序设计上讲:事件委托就是利用 ...
学习笔记之js中导出表格到excel详解+源码
在系统开发中,经常会遇到要将一个表格数据导出到excel中,刚刚做完,把示例代码共享一下,话不多说直接上代码. <!DOCTYPE html> <html> <head ...

js中的preventDefault与stopPropagation详解

js中的preventDefault与stopPropagation详解相关推荐

最新文章

热门文章