js中的preventDefault与stopPropagation详解


Posted in Javascript onJanuary 29, 2014

首先讲解一下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>

大家运行一下上面的代码就明白了。
Javascript 相关文章推荐
JavaScript面向对象之静态与非静态类
Feb 03 Javascript
jQuery在html有效在jsp无效的原因及解决方法
Aug 02 Javascript
jquery实现checkbox 全选/全不选的通用写法
Feb 22 Javascript
基于jQuery插件实现环形图标菜单旋转切换特效
May 15 Javascript
js实现浏览本地文件并显示扩展名的方法
Aug 17 Javascript
基于vue打包后字体和图片资源失效问题的解决方法
Mar 06 Javascript
webpack的CSS加载器的使用
Sep 11 Javascript
layer插件实现在弹出层中弹出一警告提示并关闭弹出层的方法
Sep 24 Javascript
ES6 Object.assign()的用法及其使用
Jan 18 Javascript
微信小程序开发之获取用户手机号码(php接口解密)
May 17 Javascript
浅析 Vue 3.0 的组装式 API(一)
Aug 31 Javascript
vue配置型表格基于el-table拓展之table-plus组件
Apr 12 Vue.js
js正则表达式中test,exec,match方法的区别说明
Jan 29 #Javascript
js的正则test,match,exec详细解析
Jan 29 #Javascript
js正则表达exec与match的区别说明
Jan 29 #Javascript
jquery实现input输入框实时输入触发事件代码
Jan 28 #Javascript
用jquery等比例控制图片宽高的具体实现
Jan 28 #Javascript
jQuery实现当按下回车键时绑定点击事件
Jan 28 #Javascript
用js正确判断用户名cookie是否存在的方法
Jan 28 #Javascript
You might like
网页游戏开发入门教程三(简单程序应用)
2009/11/02 PHP
php格式化时间戳显示友好的时间实现思路及代码
2014/10/23 PHP
PHP面向对象继承用法详解(优化与减少代码重复)
2016/12/02 PHP
laravel框架使用阿里云短信发送消息操作示例
2020/02/15 PHP
js类中获取外部函数名的方法与代码
2007/09/12 Javascript
JavaScript的9个陷阱及评点分析
2008/05/16 Javascript
求数组最大最小值方法适用于任何数组
2013/08/16 Javascript
使用js判断当前时区TimeZone是否是夏令时
2014/02/23 Javascript
原生Js实现简易烟花爆炸效果的方法
2015/03/20 Javascript
适用于javascript开发者的Processing.js入门教程
2016/02/24 Javascript
javascript HTML5文件上传FileReader API
2020/03/27 Javascript
js实现人民币大写金额形式转换
2016/04/27 Javascript
vue 打包后的文件部署到express服务器上的方法
2017/08/09 Javascript
使用mint-ui开发项目的一些心得(分享)
2017/09/07 Javascript
bootstrap 点击空白处popover弹出框隐藏实例
2018/01/24 Javascript
vue中如何实现后台管理系统的权限控制的方法步骤
2019/09/05 Javascript
jQuery实现鼠标移入显示蒙版效果
2020/01/11 jQuery
[36:20]KG vs SECRET 2019国际邀请赛小组赛 BO2 第二场 8.16
2019/08/19 DOTA
Python中给List添加元素的4种方法分享
2014/11/28 Python
详细介绍Python函数中的默认参数
2015/03/30 Python
python版本的读写锁操作方法
2016/04/25 Python
Python制作简易注册登录系统
2016/12/15 Python
TensorFlow神经网络优化策略学习
2018/03/09 Python
基于python绘制科赫雪花
2018/06/22 Python
解决安装python3.7.4报错Can''t connect to HTTPS URL because the SSL module is not available
2019/07/31 Python
pytorch 实现模型不同层设置不同的学习率方式
2020/01/06 Python
pycharm软件实现设置自动保存操作
2020/06/08 Python
Python爬虫如何破解JS加密的Cookie
2020/11/19 Python
基础的CSS3弹性盒Flexbox布局使用实例
2016/04/08 HTML / CSS
Haglöfs瑞典官方网站:haglofs火柴棍,欧洲顶级户外品牌
2018/10/18 全球购物
Raffaello Network德国:意大利拉斐尔时尚购物网
2019/05/01 全球购物
速卖通欧盟:Aliexpress EU
2020/08/19 全球购物
幼儿园中班评语大全
2014/04/17 职场文书
小学四年级学生评语
2014/12/26 职场文书
离婚上诉状范文
2015/05/23 职场文书
广播体操比赛主持词
2015/06/29 职场文书