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 相关文章推荐
jquery调用wcf并展示出数据的方法
Jul 07 Javascript
javascript 数字格式化输出的实现代码
Dec 10 Javascript
多种方法实现load加载完成后把图片一次性显示出来
Feb 19 Javascript
jquery显示隐藏input对象
Jul 21 Javascript
jQuery往返城市和日期查询实例讲解
Oct 09 Javascript
JavaScript html5 canvas绘制时钟效果(二)
Mar 27 Javascript
jQuery Tags Input Plugin(添加/删除标签插件)详解
Jun 20 Javascript
AngularJs页面筛选标签小功能
Aug 01 Javascript
Vue 通过公共字段,拼接两个对象数组的实例
Nov 07 Javascript
JavaScript实现烟花绽放动画效果
Aug 04 Javascript
Vue.Draggable实现交换位置
Apr 07 Vue.js
vue二维数组循环嵌套方式 循环数组、循环嵌套数组
Apr 24 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
is_uploaded_file函数引发的不能上传文件问题
2013/10/29 PHP
Zend Framework教程之Zend_Db_Table用法详解
2016/03/21 PHP
PHP有序表查找之插值查找算法示例
2018/02/10 PHP
javascript实现一个数值加法函数
2015/06/26 Javascript
jQuery模拟黑客帝国矩阵效果实例
2015/06/28 Javascript
JS简单实现多级Select联动菜单效果代码
2015/09/06 Javascript
总结JavaScript三种数据存储方式之间的区别
2016/05/03 Javascript
JS之if语句对接事件动作逻辑(详解)
2017/06/28 Javascript
jquery获取transform里的值实现方法
2017/12/12 jQuery
Angular5升级RxJS到5.5.3报错:EmptyError: no elements in sequence的解决方法
2018/04/09 Javascript
详解小程序不同页面之间通讯的解决方案
2018/11/23 Javascript
浅谈JavaScript闭包
2019/04/09 Javascript
JavaScript模块管理的简单实现方式详解
2019/06/15 Javascript
微信小程序仿淘宝热搜词在搜索框中轮播功能
2020/01/21 Javascript
javascript设计模式 ? 解释器模式原理与用法实例分析
2020/04/17 Javascript
[02:07]2018DOTA2亚洲邀请赛主赛事第三日五佳镜头 fy极限反杀
2018/04/06 DOTA
[01:19:46]DOTA2-DPC中国联赛 正赛 SAG vs DLG BO3 第一场 2月28日
2021/03/11 DOTA
Python实现桶排序与快速排序算法结合应用示例
2017/11/22 Python
python itchat给指定联系人发消息的方法
2019/06/11 Python
python实现简单五子棋游戏
2019/06/18 Python
在pytorch中为Module和Tensor指定GPU的例子
2019/08/19 Python
WxPython实现无边框界面
2019/11/18 Python
详解CSS3 用border写 空心三角箭头 (两种写法)
2017/09/29 HTML / CSS
Otticanet意大利:最顶尖的世界名牌眼镜, 能得到打折季的价格
2019/03/10 全球购物
澳大利亚最好的电动自行车:Leon Cycle
2020/12/19 全球购物
大学生农村教师实习自我鉴定
2013/09/21 职场文书
大学生如何写自荐信
2014/01/08 职场文书
创建文明城市标语
2014/06/16 职场文书
温馨提示标语
2014/06/26 职场文书
党员干部群众路线个人整改措施
2014/09/18 职场文书
民事调解书范文
2015/05/20 职场文书
六一亲子活动感想
2015/08/07 职场文书
品德与社会教学反思
2016/02/24 职场文书
涨工资申请书应该怎么写?
2019/07/08 职场文书
MySQL 数据类型详情
2021/11/11 MySQL
Redis中key的过期删除策略和内存淘汰机制
2022/04/12 Redis