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 相关文章推荐
如何取得中文输入的真实长度?
Jun 24 Javascript
ExtJS 2.0 实用简明教程之布局概述
Apr 29 Javascript
JavaScript对Cookie进行读写操作实例
Jul 25 Javascript
js密码强度检测
Jan 07 Javascript
jQuery与js实现颜色渐变的方法
Dec 30 Javascript
判断颜色是否合法的正则表达式(详解)
May 03 Javascript
使用express搭建一个简单的查询服务器的方法
Feb 09 Javascript
使用Vuex实现一个笔记应用的方法
Mar 13 Javascript
vue后台管理之动态加载路由的方法
Aug 13 Javascript
搭建一个Koa后端项目脚手架的方法步骤
May 30 Javascript
jQuery实现简易QQ聊天框
Feb 10 jQuery
Vue.js中v-for指令的用法介绍
Mar 13 Vue.js
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/03/21 PHP
PHP分页初探 一个最简单的PHP分页代码的简单实现
2016/06/21 PHP
PHP array_reduce()函数的应用解析
2018/10/28 PHP
网页常用特效代码整理
2006/06/23 Javascript
js类中获取外部函数名的方法
2007/08/19 Javascript
Javascript 生成指定范围数值随机数
2009/01/09 Javascript
javascript json 新手入门文档
2009/12/03 Javascript
js有关元素内容操作小结
2011/12/20 Javascript
如何用js控制frame的隐藏或显示的解决办法
2013/03/20 Javascript
jquery插件jTimer(jquery定时器)使用方法
2013/12/23 Javascript
在JavaScript中使用NaN值的方法
2015/06/05 Javascript
Javascript在IE和Firefox浏览器常见兼容性问题总结
2016/08/03 Javascript
微信公众平台开发教程(五)详解自定义菜单
2016/12/02 Javascript
jquery,js简单实现类似Angular.js双向绑定
2017/01/13 Javascript
react router 4.0以上的路由应用详解
2017/09/21 Javascript
jquery实现左右轮播图效果
2017/09/28 jQuery
Vue实战之vue登录验证的实现代码
2017/10/31 Javascript
详解小程序中h5页面onShow实现及跨页面通信方案
2019/05/30 Javascript
一篇超完整的Vue新手入门指导教程
2020/11/18 Vue.js
python将多个文本文件合并为一个文本的代码(便于搜索)
2011/03/13 Python
Python实现将SQLite中的数据直接输出为CVS的方法示例
2017/07/13 Python
Python时间的精准正则匹配方法分析
2017/08/17 Python
python实现定时提取实时日志程序
2018/06/22 Python
pytorch 求网络模型参数实例
2019/12/30 Python
带你学习Python如何实现回归树模型
2020/07/16 Python
用python写PDF转换器的实现
2020/10/29 Python
Python Django路径配置实现过程解析
2020/11/05 Python
纯CSS3实现移动端展开和收起效果的示例代码
2020/04/26 HTML / CSS
HTML5 视频播放(video),JavaScript控制视频的实例代码
2018/10/08 HTML / CSS
FC-Moto西班牙:摩托车手最大的购物场所之一
2019/04/11 全球购物
会展中心部门工作职责
2013/11/27 职场文书
汽车运用工程专业毕业生推荐信
2013/12/25 职场文书
应届生如何写自荐信
2014/01/05 职场文书
2014年三八妇女节活动方案
2014/02/28 职场文书
总结表彰大会主持词
2014/03/26 职场文书
2014年标准化工作总结
2014/12/17 职场文书