Js 冒泡事件阻止

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()的一种简写方式。