- 浏览: 1059640 次
- 性别:
- 来自: 南京
文章分类
- 全部博客 (501)
- dwr (6)
- javascript (84)
- oracle (66)
- jsp/servlet (18)
- ant (3)
- 基础知识 (12)
- EXT (10)
- My SQL (10)
- java (71)
- spring (37)
- 学习的对象 (2)
- Linux (24)
- 面试 (1)
- HTML/CSS (11)
- tomcat (11)
- 收藏夹 (2)
- Power Designer (2)
- struts.xml配置文件 (1)
- sturts2 (3)
- myeclipse (8)
- eclipse (7)
- Maven (34)
- SVN (3)
- SAP JCO (2)
- JBOSS (11)
- webservice (8)
- word (1)
- 敏捷开发 (1)
- sybase (4)
- Nexus (3)
- EhCache (3)
- log4j (3)
- Cookie (4)
- Session (4)
- CXF (7)
- AXIS (2)
- SSO (1)
- LDAP (1)
- velocity (2)
- Jquery (5)
- redis (2)
- http (4)
- dojo (1)
- Linux资源监控软件mnon的安装与运用 (1)
- notepad++ (1)
- EA (1)
- UML (1)
- JasperReports (1)
- 权限 (0)
- freemarker (4)
- Spring MVC (1)
- JMS (1)
- activeMQ (1)
- hession (3)
- 安全 (1)
- ibatis (2)
- log (1)
- nginx (1)
最新评论
-
winhbb:
我刚好遇到了一个问题(在可以依赖注入的场合有效):有两个模块A ...
解决Maven项目相互依赖/循环依赖/双向依赖的问题 -
nanjiwubing123:
long3ok 写道你好 XmlOutputFormatter ...
用XStream转换复杂XML -
zhoujianboy:
另外一个方法实现eclipse tomcat 热部署:http ...
eclipse下实现maven项目在tomcat容器热部署方法 -
long3ok:
你好 XmlOutputFormatter 请问这个类是在什么 ...
用XStream转换复杂XML -
ganbo:
总结的好,文章给力。
解决Maven项目相互依赖/循环依赖/双向依赖的问题
1. 事件目标
现在,事件处理程序中的变量event保存着事件对象。而event.target属性保存着发生事件的目标元素。这个属性是DOM API中规定的,但是没有被所有浏览器实现 。jQuery对这个事件对象进行了必要的扩展,从而在任何浏览器中都能够使用这个属性。通过.target,可以确定DOM中首先接收到事件的元素(即实际被单击的元素)。而且,我们知道this引用的是处理事件的DOM元素,所以可以编写下列代码:
此时的代码确保了被单击的元素是<div id="switcher"> ,而不是其他后代元素。现在,单击按钮不会再折叠样式转换器,而单击边框则会触发折叠操作。但是,单击标签同样什么也不会发生,因为它也是一个后代元素。实际上,我们可以不把检查代码放在这里,而是通过修改按钮的行为来达到目标 。
2. 停止事件传播
事件对象还提供了一个.stopPropagation()方法,该方法可以完全阻止事件冒泡。与.target类似,这个方法也是一种纯JavaScript特性,但在跨浏览器的环境中则无法安全地使用 。不过,只要我们通过jQuery来注册所有的事件处理程序,就可以放心地使用这个方法。
下面,我们会删除刚才添加的检查语句event.target == this,并在按钮的单击处理程序中添加一些代码:
同以前一样,需要为用作单击处理程序的函数添加一个参数,以便访问事件对象。然后,通过简单地调用event.stopPropagation()就可以避免其他所有DOM元素响应这个事件。这样一来,单击按钮的事件会被按钮处理,而且只会被按钮处理。单击样式转换器的其他地方则可以折叠和扩展整个区域。
3. 默认操作
如果我们把单击事件处理程序注册到一个锚元素,而不是一个外层的<div>上,那么就要面对另外一个问题:当用户单击链接时,浏览器会加载一个新页面。这种行为与我们讨论的事件处理程序不是同一个概念,它是单击锚元素的默认操作。类似地,当用户在编辑完表单后按下回车键时,会触发表单的submit事件,在此事件发生后,表单提交才会真正发生。
如果我们不希望执行这种默认操作,那么在事件对象上调用.stopPropagation()方法也无济于事,因为默认操作不是在正常的事件传播流中发生的。在这种情况下,.preventDefault()方法则可以在触发默认操作之前终止事件 。
提示 当在事件的环境中完成了某些验证之后,通常会用到.preventDefault()。例如,在表单提交期间,我们会对用户是否填写了必填字段进行检查,如果用户没有填写相应字段,那么就需要阻止默认操作。我们将在第8章详细讨论表单验证。
事件传播和默认操作是相互独立的两套机制,在二者任何一方发生时,都可以终止另一方。如果想要同时停止事件传播和默认操作,可以在事件处理程序中返回false,这是对在事件对象上同时调用.stopPropagation()和.preventDefault()的一种简写方式。
【转载地址】http://www.cnblogs.com/jams742003/archive/2009/08/29/1556187.html
现在,事件处理程序中的变量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/archive/2009/08/29/1556187.html
发表评论
-
JSONEditor
2015-07-08 20:11 552JSONEditor: https://github.com/ ... -
Javascript开发调试
2014-07-08 10:08 737小谈chrome调试命令:console.log的使用 h ... -
利用Script实现JSONP跨域
2014-01-24 09:38 9141.什么是跨域 我们经常会在页面上使用ajax请求访问其他服 ... -
jQuery JSONP 跨域实践
2013-12-12 18:24 681jQuery JSONP 跨域实践 一客户端(url:htt ... -
利用CSS、JavaScript及Ajax实现图片预加载的三大方法
2013-10-17 09:35 708预加载图片是提高用户体验的一个很好方法。图片预先加载到浏览器中 ... -
Js中escape(),encodeURI()和encodeURIComponent()使用和比较:
2013-09-12 09:42 1028Js中escape(),encodeURI()和encodeU ... -
If-Modified-Since & If-None-Match
2013-04-27 13:24 857If-Modified-Since & If-None ... -
为什么JS文件带参数 JS后带参数什么意思
2013-04-27 11:20 1338我们经常在页面里会看到在加载的js或css文件带时文件后面常常 ... -
js实现网页图片延时加载的原理和代码
2013-04-23 11:52 995有时我们看到一些大型网站,页面如果有很多图片的时候,当你滚动到 ... -
关于document.compatMode的一些介绍
2013-04-22 17:35 968对于document.compatMode,很多朋友可能都根我 ... -
js之事件冒泡和事件捕获
2013-04-20 10:03 1727事件——怎样使用事件以及IE和DOM事件模型之间存在哪些主要差 ... -
js中addEventListener中第3个参数 .
2013-04-19 16:33 1618捕获阶段、目标阶段、冒泡阶段 addEventListener ... -
超链接在web开发中使用总结
2013-04-02 14:33 1121在工作中在前端页面的 ... -
JavaScript Module Pattern: In-Depth
2013-03-27 11:47 975Module difinition: http://www.a ... -
JQuery移除事件
2013-01-30 13:00 929移除事件 unbind(type [,data]) ... -
查找所有嵌套iframe .
2013-01-28 10:19 114501.//查找所有嵌套iframevar allIfrs = ... -
什么是同源策略
2012-12-12 11:15 1135一.什么是同源策略 ... -
js 编码,使用java解码方式
2012-10-30 11:02 1628使用两个方法:decodeURIComponent和escap ... -
Cookies
2012-05-04 10:10 1035ookies Cookies 集合设置 coo ... -
XMLHttpRequest 对象(AJAX)的状态码(readyState)及HTTP 状态代码(status)的对照表
2012-04-19 19:43 1466XMLHttpRequest 对象(AJAX)的状态码(rea ...
相关推荐
在JavaScript中,我们可以使用`event.stopPropagation()`方法来阻止事件冒泡。当我们在监听的事件处理函数中调用这个方法时,可以确保事件不会继续向上层元素传播。例如,如果我们在一个内部元素上监听`mousewheel`...
`index.html`通常是网页的结构,而`min.js`可能包含了压缩过的JavaScript代码,用于演示阻止事件冒泡的实现。通过查看这两个文件,我们可以更深入地理解阻止事件冒泡的实践应用。 总结一下,阻止事件冒泡是...
js阻止冒泡事件的方法有2种。 事件冒泡:当一个元素上的事件被触发时,同样的事件会在那个元素的所有祖先元素中被触发。 这个事件是从原始元素开始一直冒泡到DOM树最上层。 目标元素:任何一个事件的目标元素...
以上就是JavaScript中阻止事件冒泡的实现方式以及与之相关的`event` 对象的使用。通过这些方法,我们可以更精细地控制事件在DOM树中的传播和处理。在实际开发中,合理利用这些功能可以提高用户体验,避免不必要的...
在冒泡阶段,可以在任何父级元素上的事件处理函数中调用event.stopPropagation()方法来阻止事件进一步向上冒泡。 事件捕获则是与冒泡相对的一个过程。在事件捕获模型中,事件从最外层(window对象)开始向下传播,...
本文将详细介绍如何使用原生JavaScript (JS) 和 jQuery 来阻止事件冒泡,并通过实际示例加深理解。 #### 二、JS 阻止事件冒泡的方法 ##### 1. 原生JS阻止事件冒泡 在原生JS中,阻止事件冒泡可以通过以下两种方式...
在javascript的dom操作做肯定会遇到js的冒泡事件,最常见的是div弹窗事件如图解 当点击灰色部分是弹窗消失,点击黑色部分时没有效果。 通过下面一段代码来分析js的冒泡事件 html代码: 代码如下: <!DOCTYPE ...
此外,`event.stopPropagation()`方法可以阻止事件继续向上冒泡,而`event.stopImmediatePropagation()`则不仅可以阻止冒泡,还能阻止同一元素上的其他事件处理函数被执行。 总结一下,JavaScript事件冒泡是浏览器...
2. **阻止事件冒泡**: 事件冒泡是指事件从最深的节点开始,逐级向上层节点传播事件。当一个元素和其子元素都有事件监听器时,点击子元素会先执行子元素的事件,然后依次执行所有父元素的事件。`event....
JavaScript+jQuery 网页特效设计;鼠标事件;1、鼠标事件;1、鼠标事件(案例);2、键盘事件;2、键盘事件(案例);3、事件的冒泡与阻止;3、事件的冒泡与阻止;3、事件的冒泡与阻止;...3、事件的冒泡与阻止
js阻止冒泡 $(document).click(function(){ $(".scxl").children('ul').hide(); })
总的来说,JavaScript的事件冒泡机制是DOM事件处理的基础,理解并掌握如何阻止事件冒泡对于编写复杂的交互式Web应用非常关键。通过原生JavaScript或使用像jQuery这样的库,我们可以精确控制事件的传播和处理,从而...
`event.stopPropagation()`用于阻止事件冒泡,保持事件在当前元素内处理。事件委托则是一种优化策略,将事件监听器放在共享的父元素上,利用`event.target`来识别和处理具体触发事件的子元素,减少了重复的事件绑定...
有时我们需要阻止事件冒泡,以免影响到父元素的事件处理。这可以通过在事件处理函数中调用`event.stopPropagation()`来实现。这样,事件就不会继续向上层元素传播。 ### 4. HTMLMaopao.html文件分析 `htmlMaopao....
使用`event.preventDefault()`可以阻止事件的默认行为,但并不会阻止事件的冒泡。在本例中,这可能不是必要的,因为默认行为通常与冒泡无关。 4. **特定事件处理**: 如果你只想让外部div的事件在特定条件下触发...
然而,在使用tap事件的时候,会遇到阻止事件冒泡的问题。在zepto.js中,原生的事件处理方法如stopPropagation(),并不能阻止tap事件的冒泡行为。这是因为tap事件与click事件在浏览器处理上存在差异,click事件的...
jQuery库提供了方便的方式来处理DOM事件,包括阻止事件冒泡的功能。这个功能在构建交互式网页时非常有用,可以避免不必要的事件处理或者防止多次执行相同的操作。 jQuery中的`event.stopPropagation()`方法是阻止...
为了更好地控制事件冒泡,开发者可以使用`event.stopPropagation()`方法来阻止事件继续向上冒泡,或者使用`event.stopImmediatePropagation()`防止其他在同一元素上注册的事件处理程序被执行。这些技巧在处理复杂...