首页 技术 正文
技术 2022年11月17日
0 收藏 365 点赞 3,520 浏览 1730 个字

原文连接:http://www.cnblogs.com/jams742003/archive/2009/08/29/1556187.html

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"> ,而不是其它后代元素。如今,单击button不会再折叠样式转换器。而单击边框则会触发折叠操作。可是,单击标签相同什么也不会发生,由于它也是一个后代元素。实际上。我们能够不把检查代码放在这里,而是通过改动button的行为来达到目标 。

2. 停止事件传播

事件对象还提供了一个.stopPropagation()方法,该方法能够全然阻止事件冒泡。与.target类似,这种方法也是一种纯JavaScript特性,但在跨浏览器的环境中则无法安全地使用 。

只是,仅仅要我们通过jQuery来注冊全部的事件处理程序。就能够放心地使用这种方法。

以下。我们会删除刚才加入的检查语句event.target == this。并在button的单击处理程序中加入一些代码:

$(document).ready(function(){

 $(‘#switcher .button’).click(funtion(event){

  //……

   event.stopPropagation();

  })

 }) 

  同曾经一样,须要为用作单击处理程序的函数加入一个參数。以便訪问事件对象。然后。通过简单地调用event.stopPropagation()就能够避免其它全部DOM元素响应这个事件。这样一来,单击button的事件会被button处理。并且仅仅会被button处理。

单击样式转换器的其它地方则能够折叠和扩展整个区域。

3. 默认操作

假设我们把单击事件处理程序注冊到一个锚元素,而不是一个外层的<div>上,那么就要面对另外一个问题:当用户单击链接时。浏览器会载入一个新页面。这样的行为与我们讨论的事件处理程序不是同一个概念,它是单击锚元素的默认操作。类似地,当用户在编辑完表单后按下回车键时。会触发表单的submit事件,在此事件发生后,表单提交才会真正发生。

假设我们不希望运行这样的默认操作。那么在事件对象上调用.stopPropagation()方法也无济于事,由于默认操作不是在正常的事件传播流中发生的。

在这样的情况下,.preventDefault()方法则能够在触发默认操作之前终止事件 。

提示 当在事件的环境中完毕了某些验证之后,一般会用到.preventDefault()。比如。在表单提交期间。我们会对用户是否填写了必填字段进行检查。假设用户没有填写对应字段,那么就须要阻止默认操作。我们将在第8章具体讨论表单验证。

事件传播和默认操作是相互独立的两套机制,在二者不论什么一方发生时,都能够终止还有一方。假设想要同一时候停止事件传播和默认操作,能够在事件处理程序中返回false。这是对在事件对象上同一时候调用.stopPropagation()和.preventDefault()的一种简写方式。

相关推荐
python开发_常用的python模块及安装方法
adodb:我们领导推荐的数据库连接组件bsddb3:BerkeleyDB的连接组件Cheetah-1.0:我比较喜欢这个版本的cheeta…
日期:2022-11-24 点赞:878 阅读:9,104
Educational Codeforces Round 11 C. Hard Process 二分
C. Hard Process题目连接:http://www.codeforces.com/contest/660/problem/CDes…
日期:2022-11-24 点赞:807 阅读:5,581
下载Ubuntn 17.04 内核源代码
zengkefu@server1:/usr/src$ uname -aLinux server1 4.10.0-19-generic #21…
日期:2022-11-24 点赞:569 阅读:6,428
可用Active Desktop Calendar V7.86 注册码序列号
可用Active Desktop Calendar V7.86 注册码序列号Name: www.greendown.cn Code: &nb…
日期:2022-11-24 点赞:733 阅读:6,200
Android调用系统相机、自定义相机、处理大图片
Android调用系统相机和自定义相机实例本博文主要是介绍了android上使用相机进行拍照并显示的两种方式,并且由于涉及到要把拍到的照片显…
日期:2022-11-24 点赞:512 阅读:7,835
Struts的使用
一、Struts2的获取  Struts的官方网站为:http://struts.apache.org/  下载完Struts2的jar包,…
日期:2022-11-24 点赞:671 阅读:4,918