Js 冒泡事件阻止实现代码


Posted in Javascript onJanuary 27, 2013

1. 事件目标

现在,事件处理程序中的变量event保存着事件对象。而event.target属性保存着发生事件的目标元素。这个属性是DOM API中规定的,但是没有被所有浏览器实现 。jQuery对这个事件对象进行了必要的扩展,从而在任何浏览器中都能够使用这个属性。通过.target,可以确定DOM中首先接收到事件的元素(即实际被单击的元素)。而且,我们知道this引用的是处理事件的DOM元素,所以可以编写下列代码:

$(document).ready(function(){
 $('#switcher').click(function(event){
  $('#switcher .button').toggleClass('hidden');
  })
 })$(document).ready(function(){
 $('#switcher').click(function(event){
  if(event.target==this){
  $('#switcher .button').toggleClass('hidden');
  }
  })
 })
 

此时的代码确保了被单击的元素是<div id="switcher"> ,而不是其他后代元素。现在,单击按钮不会再折叠样式转换器,而单击边框则会触发折叠操作。但是,单击标签同样什么也不会发生,因为它也是一个后代元素。实际上,我们可以不把检查代码放在这里,而是通过修改按钮的行为来达到目标 。

2. 停止事件传播

事件对象还提供了一个.stopPropagation()方法,该方法可以完全阻止事件冒泡。与.target类似,这个方法也是一种纯JavaScript特性,但在跨浏览器的环境中则无法安全地使用 。不过,只要我们通过jQuery来注册所有的事件处理程序,就可以放心地使用这个方法。
下面,我们会删除刚才添加的检查语句event.target == this,并在按钮的单击处理程序中添加一些代码:

$(document).ready(function(){
 $('#switcher .button').click(funtion(event){
  //……
   event.stopPropagation();
  })
 })

  同以前一样,需要为用作单击处理程序的函数添加一个参数,以便访问事件对象。然后,通过简单地调用event.stopPropagation()就可以避免其他所有DOM元素响应这个事件。这样一来,单击按钮的事件会被按钮处理,而且只会被按钮处理。单击样式转换器的其他地方则可以折叠和扩展整个区域。

3. 默认操作

如果我们把单击事件处理程序注册到一个锚元素,而不是一个外层的<div>上,那么就要面对另外一个问题:当用户单击链接时,浏览器会加载一个新页面。这种行为与我们讨论的事件处理程序不是同一个概念,它是单击锚元素的默认操作。类似地,当用户在编辑完表单后按下回车键时,会触发表单的submit事件,在此事件发生后,表单提交才会真正发生。
如果我们不希望执行这种默认操作,那么在事件对象上调用.stopPropagation()方法也无济于事,因为默认操作不是在正常的事件传播流中发生的。在这种情况下,.preventDefault()方法则可以在触发默认操作之前终止事件 。
提示 当在事件的环境中完成了某些验证之后,通常会用到.preventDefault()。例如,在表单提交期间,我们会对用户是否填写了必填字段进行检查,如果用户没有填写相应字段,那么就需要阻止默认操作。我们将在第8章详细讨论表单验证。
事件传播和默认操作是相互独立的两套机制,在二者任何一方发生时,都可以终止另一方。如果想要同时停止事件传播和默认操作,可以在事件处理程序中返回false,这是对在事件对象上同时调用.stopPropagation()和.preventDefault()的一种简写方式。

补充:

//单击按钮事件(改变文字样式)
$(document).ready(function() {
   $('#switcher .button').click(function() {
     $('body').removeClass();
     if (this.id == 'switcher-narrow') {
       $('body').addClass('narrow');
     }
     else if (this.id == 'switcher-large') {
       $('body').addClass('large');
     }     $('#switcher .button').removeClass('selected');
     $(this).addClass('selected');
   });
});

//单击按钮外层div出发事件(隐藏按钮)
$(document).ready(function() {
   $('#switcher').click(function() {
     $('#switcher .button').toggleClass('hidden');
   });
});

现在的问题是,当点击了按钮时,同时触发了隐藏按钮事件。这是事件冒泡导致。
为了阻止事件冒泡,需要为隐藏按钮函数添加一个参数:
$(document).ready(function() {
   $('#switcher').click(function(even) {
     if(even.target==this){
       $('#switcher .button').toggleClass('hidden');
     }
   });
});

even保存事件对象,even.target属性保存发生事件的目标元素。可以确定DOM中首先接收到事件的元素。此时代码确保了被单击的是<div id="switcher">,而不是其后代元素。

也可以这样处理,通过修改按钮的行为来达到目的。

$(document).ready(function() {
   $('#switcher .button').click(function(even) {
     $('body').removeClass();
     if (this.id == 'switcher-narrow') {
       $('body').addClass('narrow');
     }
     else if (this.id == 'switcher-large') {
       $('body').addClass('large');
     }     $('#switcher .button').removeClass('selected');
     $(this).addClass('selected');
     even.stopPropagation();
   });
});

用JS阻止事件冒泡

事件冒泡: 当一个元素上的事件被触发的时候,比如说鼠标点击了一个按钮,同样的事件将会在那个元素的所有祖先元素中被触发。这一过程被称为事件冒泡;这个事件从原始元素开始一直冒泡到DOM树的最上层。
可以用JS来阻止js事件冒泡。因为浏览器的差异IE和FF的JS写法有点不一样。
IE用cancelBubble=true来阻止而FF下需要用stopPropagation方法。
下一下完整的代码:

<!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>无标题文档</title>
<script type="text/javascript">
function aaaclick(){
 alert("td click");
}
function bbbclick(evt){
 alert("td click");
 if (window.event) {
  event.cancelBubble = true;
 }else if (evt){
  evt.stopPropagation();
 }
}
function trclick(){
 alert("tr click");
}
function tableclick(){
 alert("table click");
}
</script>
<style type="text/css">
<!--
.tab {
 border: 1px solid #0066FF;
 cellpadding:0px;
 cellspacing:0px;
}
.tab td{
 border: 1px solid #0066FF;
}
-->
</style>
</head>
<body>
<p>点击aaaa会触发上层的onclick事件,点击bbbb不会触发上层onclick事件</p>
<table width="204" onclick="tableclick()" class="tab">
  <tr >
    <td width="96"> </td>
    <td width="96"> </td>
  </tr>
  <tr onclick="trclick()">
    <td onclick="aaaclick()">aaaa</td>
    <td onclick="bbbclick(event)">bbbbb</td>
  </tr>
  <tr>
    <td> </td>
    <td> </td>
  </tr>
</table>
</body>
</html>
Javascript 相关文章推荐
给Javascript数组插入一条记录的代码
Aug 30 Javascript
JavaScript判断DOM何时加载完毕的技巧
Nov 11 Javascript
用jQuery获取IE9下拉框默认值问题探讨
Jul 22 Javascript
使用JavaScript制作一个简单的计数器的方法
Jul 07 Javascript
JS实现新浪微博效果带遮罩层的弹出框代码
Oct 12 Javascript
JS引用传递与值传递的区别与用法分析
Jun 01 Javascript
JS栈stack类的实现与使用方法示例
Jan 31 Javascript
Node.js爬虫如何获取天气和每日问候详解
Aug 26 Javascript
封装一下vue中的axios示例代码详解
Feb 16 Javascript
微信小程序间使用navigator跳转传值问题实例分析
Mar 27 Javascript
js实现无缝轮播图插件封装
Jul 31 Javascript
Vue实现开关按钮拖拽效果
Sep 22 Javascript
javascript里模拟sleep(两种实现方式)
Jan 25 #Javascript
调试Javascript代码(浏览器F12及VS中debugger关键字)
Jan 25 #Javascript
如何让easyui gridview 宽度自适应窗口改变及fitColumns应用
Jan 25 #Javascript
js隐藏与显示回到顶部按钮及window.onscroll事件应用
Jan 25 #Javascript
jquery移除button的inline onclick事件(已测试及兼容浏览器)
Jan 25 #Javascript
javascript表单验证 - Parsley.js使用和配置
Jan 25 #Javascript
THREE.JS入门教程(6)创建自己的全景图实现步骤
Jan 25 #Javascript
You might like
php面向对象与面向过程两种方法给图片添加文字水印
2015/08/26 PHP
深入理解PHP JSON数组与对象
2016/07/19 PHP
php实现的二叉树遍历算法示例
2017/06/15 PHP
EasyUI中的tree用法介绍
2011/11/01 Javascript
JavaScript子窗口ModalDialog中操作父窗口对像
2012/12/11 Javascript
jQuery中ready事件用法实例
2015/01/19 Javascript
jQuery使用post方法提交数据实例
2015/03/25 Javascript
jquery带下拉菜单和焦点图代码分享
2015/08/24 Javascript
10分钟掌握XML、JSON及其解析
2020/12/06 Javascript
js浏览器滚动条卷去的高度scrolltop(实例讲解)
2017/07/07 Javascript
Node.js五大应用性能技巧小结(必须收藏)
2017/08/09 Javascript
微信小程序富文本渲染引擎的详解
2017/09/30 Javascript
js推箱子小游戏步骤代码解析
2018/01/10 Javascript
解决VUEX兼容IE上的报错问题
2018/03/01 Javascript
JS实现在线ps功能详解
2019/07/31 Javascript
深入探索VueJS Scoped CSS 实现原理
2019/09/23 Javascript
Python中用Descriptor实现类级属性(Property)详解
2014/09/18 Python
用Python编写一个简单的俄罗斯方块游戏的教程
2015/04/03 Python
在Django中创建第一个静态视图
2015/07/15 Python
浅谈Python中的zip()与*zip()函数详解
2018/02/24 Python
python 限制函数调用次数的实例讲解
2018/04/21 Python
Python实现在某个数组中查找一个值的算法示例
2018/06/27 Python
对Python2与Python3中__bool__方法的差异详解
2018/11/01 Python
sklearn-SVC实现与类参数详解
2019/12/10 Python
Pytorch GPU显存充足却显示out of memory的解决方式
2020/01/13 Python
英国泰坦旅游网站:全球陪同游览,邮轮和铁路旅行
2016/11/29 全球购物
凯伦·米莲女装网上商店:Karen Millen
2017/11/07 全球购物
以实惠的价格提供高品质的时尚:Newchic
2018/01/18 全球购物
Diptyque英国官方网站:源自法国的知名香氛品牌
2019/08/28 全球购物
普通大学毕业生自荐信
2013/11/04 职场文书
党员党性分析材料
2014/02/17 职场文书
鸟的天堂导游词
2015/01/31 职场文书
2015年小学数学教师个人工作总结
2015/05/25 职场文书
任命书格式范文
2015/09/22 职场文书
Element-ui Layout布局(Row和Col组件)的实现
2021/12/06 Vue.js
一条 SQL 语句执行过程
2022/03/17 MySQL