程序员人生 网站导航

Js 冒泡事件阻止

栏目:htmlcss时间:2015-03-20 08:25:54
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"> ,而不是其他后代元素。现在,单击按钮不会再折叠样式转换器,而单击边框则会触发折叠操作。但是,单击标签一样甚么也不会产生,由于它也是1个后代元素。实际上,我们可以不把检查代码放在这里,而是通过修改按钮的行动来到达目标 

2. 停止事件传播

事件对象还提供了1个.stopPropagation()方法,该方法可以完全禁止事件冒泡。与.target类似,这个方法也是1种纯JavaScript特性,但在跨阅读器的环境中则没法安全地使用 。不过,只要我们通过jQuery来注册所有的事件处理程序,就能够放心肠使用这个方法。

下面,我们会删除刚才添加的检查语句event.target == this,并在按钮的单击处理程序中添加1些代码:

$(document).ready(function(){
 $('#switcher .button').click(funtion(event){
  //……
   event.stopPropagation();
  })
 }) 

  同之前1样,需要为用作单击处理程序的函数添加1个参数,以便访问事件对象。然后,通过简单地调用event.stopPropagation()就能够避免其他所有DOM元素响应这个事件。这样1来,单击按钮的事件会被按钮处理,而且只会被按钮处理。单击样式转换器的其他地方则可以折叠和扩大全部区域。

3. 默许操作

如果我们把单击事件处理程序注册到1个锚元素,而不是1个外层的<div>上,那末就要面对另外1个问题:当用户单击链接时,阅读器会加载1个新页面。这类行动与我们讨论的事件处理程序不是同1个概念,它是单击锚元素的默许操作。类似地,当用户在编辑完表单后按下回车键时,会触发表单的submit事件,在此事件产生后,表单提交才会真正产生。

如果我们不希望履行这类默许操作,那末在事件对象上调用.stopPropagation()方法也杯水车薪,由于默许操作不是在正常的事件传播流中产生的。在这类情况下,.preventDefault()方法则可以在触发默许操作之前终止事件 

提示 当在事件的环境中完成了某些验证以后,通常会用到.preventDefault()。例如,在表单提交期间,我们会对用户是不是填写了必填字段进行检查,如果用户没有填写相应字段,那末就需要禁止默许操作。我们将在第8章详细讨论表单验证。

事件传播和默许操作是相互独立的两套机制,在2者任何1方产生时,都可以终止另外一方。如果想要同时停止事件传播和默许操作,可以在事件处理程序中返回false,这是对在事件对象上同时调用.stopPropagation().preventDefault()的1种简写方式。

------分隔线----------------------------
------分隔线----------------------------

最新技术推荐