js事件防止冒泡
原文连接: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()的一种简写方式。
js事件防止冒泡的更多相关文章
- 什么是js事件,冒泡机制,事件捕获,默认行为
js事件: javascript使我们能够有能力创建动态页面,事件就是可以被js侦测到的行为,网页中每个元素都可以产生某些触发js函数的事件. 例如我们可以在用户点击某个按钮时产生一个click事件来 ...
- JS事件阻止冒泡的写法
$("body").on("click", "#id", function (ev) { ev = ev || event;要写的逻辑代码 ...
- js 事件阻止冒泡
参考 https://www.cnblogs.com/zhuzhenwei918/p/6139880.html event.stopPropagation();
- 什么是JS事件冒泡?
什么是JS事件冒泡?: 在一个对象上触发某类事件(比如单击onclick事件),如果此对象定义了此事件的处理程序,那么此事件就会调用这个处理程序,如果没有定义此事件处理 程序或者事件返回true,那么 ...
- 探讨Js的事件的冒泡阶段
近来看到了一个新的知识点叫Js的事件冒泡,因此决定自己来研究一番. 大家应该都知道,Js中的事件处理分为三个阶段,1:事件的捕获阶段,2:处于目标阶段,3:事件的冒泡阶段.那么什么是事件的捕获和冒泡呢 ...
- js 事件冒泡是什么如何用jquery阻止事件冒泡
什么是事件起泡:一个事件不能凭空产生,这就是事件的发生等等,接下来为大家介绍下jquery阻止事件起泡以及关于js事件起泡的验证,感兴趣的朋友可以参考下哈 (1)什么是事件起泡 首先你要明 ...
- JS事件冒泡
JavaSciprt事件中有两个很重要的特性:事件冒泡以及目标元素. 事件冒泡: 当一个元素上的事件被触发的时候,比如说鼠标点击了一个按钮,同样的事件将会在那个元素的所有祖先元素中被触发.这 一过程被 ...
- js 事件监听 冒泡事件
js 事件监听 冒泡事件 的取消 [自己写框架时,才有可能用到] <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitiona ...
- js的捕捉事件,冒泡事件
冒泡事件可以查询上个随笔, 捕捉事件正好和冒泡时间正反着 所以这代码我把冒泡事件注释, html和css的内容 <style type="text/css"> #box ...
随机推荐
- Oracle IN 传递字符串参数查询失效
在写存储过程中有如下代码: FOR a IN ( SELECT a.svo_no,a.AUDIT_NO,a.order_id FROM TT_PI_MODEL_REL a ) LOOP SELECT ...
- Kickstart + http Linux自动化部署服务端
设备需要开启Network Boot功能.具体PXE技术就另外提,本文主要讲解配置. 在搭建该服务器之前需要关闭SELinux和iptables不然可能dhcp服务都起不来,客户端收不到IP地址,无法 ...
- 详解函数声明VS函数表达式
函数声明 比方如下:1.我们以一个完整的语句以function开头,不加任何东西. 2.有一个函数名(add) 3.参数可带可不带(x,y) 4.有一个数体 满足以上要求的我们统称为函数声明! 附加小 ...
- CSS实现图片在div a标签中水平垂直居中
CSS实现图片在div a标签中水平垂直居中 <div class="demo"> <a href="#"> <img src=& ...
- 颤抖吧,Css3
相关文章地址:http://sc.chinaz.com/info/140315283609.htm http://files.cnblogs.com/xinlinux/csshake.min.css ...
- openshif ssh proxy
最近google又被墙了.没办法 1:注册一个openshift账号.申请注册一个app,获取一个免费主机. https://www.openshift.com/ 2:去PuTTY官方网站下载pL ...
- A Statistical View of Deep Learning (II): Auto-encoders and Free Energy
A Statistical View of Deep Learning (II): Auto-encoders and Free Energy With the success of discrimi ...
- 【面试】惠普IT电面
1.英文自我介绍 一定要事先准备,逻辑要清晰 2.英文项目介绍
- Unity3d webplayer发布的问题和100%自适应浏览器
Unity3d发布的问题 发布的时候,遇到无法写入Resources.assets,原来是我的项目中有多个Resources文件夹,以后最好是不要有重复的文件夹和一样名字的资源! 还有就是发布的web ...
- VC版本的MakeObjectInstance把WNDPROC映射到类的成员函数
这段时间用VC封装Windows类库,没有MakeObjectInstance处理窗口消息确实不爽,又不想使用MFC的消息映射,这玩意的效率和美观只能呵呵. 至于MakeObjectInstance是 ...