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常考语句107条收集
Mar 09 Javascript
Javascript笔记一 js以及json基础使用说明
May 22 Javascript
jQuery Dialog 弹出层对话框插件
Aug 09 Javascript
父子窗体间传递JSON格式的数据的代码
Dec 25 Javascript
textarea焦点的用法实现获取焦点清空失去焦点提示效果
May 19 Javascript
js设置cookie过期当前时间减去一秒相当于立即过期
Sep 04 Javascript
vue脚手架vue-cli的学习使用教程
Jun 06 Javascript
Angular ElementRef简介及其使用
Oct 01 Javascript
在Vue项目中使用snapshot测试的具体使用
Apr 16 Javascript
vue瀑布流组件实现上拉加载更多
Mar 10 Javascript
vue 清空input标签 中file的值操作
Jul 21 Javascript
Vue使用鼠标在Canvas上绘制矩形
Dec 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
php/js获取客户端mac地址的实现代码
2013/07/08 PHP
PHP把网页保存为word文件的三种方法
2014/04/01 PHP
获取Javscript执行函数名称的方法
2006/12/22 Javascript
JavaScript的面向对象方法以及差别
2008/03/31 Javascript
在Ajax中使用Flash实现跨域数据读取的实现方法
2010/12/02 Javascript
20个非常棒的 jQuery 幻灯片插件和教程分享
2011/08/23 Javascript
js常用代码段收集
2011/10/28 Javascript
JavaScript中两个感叹号的作用说明
2011/12/28 Javascript
javascript内置对象arguments详解
2014/03/16 Javascript
js常用系统函数用法实例分析
2015/01/12 Javascript
jquery实现向下滑出的二级导航下滑菜单效果
2015/08/25 Javascript
js计算文本框输入的字符数
2015/10/23 Javascript
值得分享的Bootstrap Ace模板实现菜单和Tab页效果
2015/12/30 Javascript
javascript中对Date类型的常用操作小结
2016/05/19 Javascript
jQuery弹出层后禁用底部滚动条(移动端关闭回到原位置)
2016/08/29 Javascript
jQuery网页定位导航特效实现方法
2016/12/19 Javascript
浅谈regExp的test方法取得的值变化的原因及处理方法
2017/03/01 Javascript
详解Angular 4.x NgIf 的用法
2017/05/22 Javascript
vue+webpack模拟后台数据的示例代码
2018/07/26 Javascript
微信小程序自定义导航教程(兼容各种手机)
2018/12/12 Javascript
vue-cli中安装方法(图文详细步骤)
2018/12/12 Javascript
基于vue实现图片验证码倒计时60s功能
2019/12/10 Javascript
ES6扩展运算符和rest运算符用法实例分析
2020/05/23 Javascript
介绍Python的Django框架中的QuerySets
2015/04/20 Python
Python 文本文件内容批量抽取实例
2018/12/10 Python
Python随机函数库random的使用方法详解
2019/08/21 Python
django删除表重建的实现方法
2019/08/28 Python
关于pytorch处理类别不平衡的问题
2019/12/31 Python
Python for循环搭配else常见问题解决
2020/02/11 Python
python3用urllib抓取贴吧邮箱和QQ实例
2020/03/10 Python
JackJones官方旗舰店:杰克琼斯男装
2018/03/27 全球购物
服装设计行业个人的自我评价
2013/12/20 职场文书
幼儿园安全检查制度
2014/01/30 职场文书
公司门卫工作职责
2014/06/28 职场文书
单位实习工作证明怎么写
2014/11/02 职场文书
古诗文之爱国名句(77句)
2019/09/24 职场文书