Fork me on GitHub
Js 冒泡事件阻止

Js 冒泡事件阻止

 

JS阻止冒泡方法

博客分类：
 
JS事件流其中一种是冒泡事件，当一个元素被触发一个事件时，该目标元素的事件会优先被执行，然后向外传播到每个祖先元素，恰如水里的一个泡泡似的，从产 生就一直往上浮，到在水平面时，它才消失。在这个过程中，如果你只希望事件发生在目标元素，而不想它传播到祖先元素上去，那么你需要在“泡泡”离开对象之 前刺破它。

　　我在文档中写了一个层，<div id="need_hide">点击以外隐藏该层</div>，并为之设置了简单的样式，现在我希望点击该层以外的地方使之隐藏，那么 我给根元素绑定了一个click事件，一点击html就隐藏该DIV，代码如下：
Javascript代码  收藏代码
  1. document.documentElement.onclick = function() {  
  2.     document.getElementById('need_hide').style.display = 'none';  
  3. }  


　　但是点击该层后，也使之隐藏了，这不是我希望得到的效果。由于该层属于根元素的子节点，所以它也被绑定了这个click事件，那么需在该元素被click时阻止冒泡事件的发生，加上以下代码：
Javascript代码  收藏代码
  1. function stopPropagation(e) {  
  2.     e = e || window.event;  
  3.     if(e.stopPropagation) { //W3C阻止冒泡方法  
  4.         e.stopPropagation();  
  5.     } else {  
  6.         e.cancelBubble = true; //IE阻止冒泡方法  
  7.     }  
  8. }  
  9. document.getElementById('need_hide').onclick = function(e) {  
  10.     stopPropagation(e);  
  11. }  

　　如果还想增加一个链接：<a href="#" id="btn_show">显示层</a>，用它来控制该层显示出来，那么仍然需要在该链接被点击时阻止冒泡事件的发生，加上以下代码：
Javascript代码  收藏代码
  1. document.getElementById('btn_show').onclick = function(e) {  
  2.     document.getElementById('need_hide').style.display = 'block';  
  3.     stopPropagation(e);  
  4. }  
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()的一种简写方式。

博客园大道至简

http://www.cnblogs.com/jams742003/

转载请注明：博客园

 
分类: JavaScript
posted on 2013-08-23 13:57  HackerVirus  阅读(202)  评论(0)    收藏  举报
博客园  ©  2004-2025
浙公网安备 33010602011771号 浙ICP备2021040463号-3