Js 冒泡事件阻止实现代码

更新时间：2013年01月27日 12:05:15 作者：

当一个元素上的事件被触发的时候，比如说鼠标点击了一个按钮，同样的事件将会在那个元素的所有祖先元素中被触发

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>

<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>

您可能感兴趣的文章:

js中[]、{}、()区别示例浅析
很多人都知道在js中[]表示的是数组对象,{}表示的是对象,但是这两者的区别却说不出来,下面这篇文章主要给大家介绍了关于js中[]、{}、()区别的相关资料,需要的朋友可以参考下
2023-06-06
Bootstrap table列上下移动效果
这篇文章主要为大家详细介绍了Bootstrap table列上下移动效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2022-02-02
微信小程序实现简单倒计时功能
这篇文章主要为大家详细介绍了微信小程序实现简单倒计时功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2022-05-05
浅谈js二维码扫码登录是什么原理
这篇文章主要介绍了浅谈js二维码扫码登录是什么原理，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2021-04-04
javascript内存分配原理实例分析
这篇文章主要介绍了javascript内存分配原理,结合实例形式分析了javascript原始值和引用值内存分配的原理与实现技巧,需要的朋友可以参考下
2017-04-04
jquery下onpropertychange事件的绑定方法
用了onchange事件，但是在输入的时候，用Javascript计算出并填值的那一列并不会响应onchange 事件。
2010-08-08
微信小程序实现猜数字小游戏的实战过程
一起猜数字是微信一款休闲类小游戏,下面这篇文章主要给大家介绍了关于微信小程序实现猜数字小游戏的相关资料,文中通过示例代码介绍的非常详细,需要的朋友可以参考下
2021-12-12
拥Bootstrap入怀——导航栏篇
拥Bootstrap入怀导航栏篇，和大家一起走进Bootstrap，了解Bootstrap的导航栏，感兴趣的小伙伴们可以参考一下
2016-05-05
js change,propertychange,input事件小议
github上关于mootools一个issue的讨论很有意思，所以就想测试记录下。感兴趣的可以点击原页面看看
2011-12-12
一个关于JS操作符in问题引发的探究
这篇文章主要给大家介绍了一个JS操作符in问题引发的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2021-04-04