jQuery阻止冒泡和HTML默认操作
1:jQuery是一个快捷简便的JavaScript框架,说道框架可以直接理解为就是对原来底层的东西进行了封装使得开发者能够利用这个框架快速开发。
2:在当今的各个浏览器中都支持事件的冒泡,所谓的冒泡可以这样理解:
事件:现在我们都在这两个元素上绑定相同的事件,比如click事件。
结果:这时,当我们点击内层的P标签的时候,内层元素的click事件触发,同时外层DIV的click事件也会触发。
3:在HTML中有的元素被定义了一些默认的属性,比如说A元素,这个元素就是我们平时使用的超链接标签,这个标签的默认属性是实现页面的跳转。
4:在jQuery的每一个事件中都会有一个默认的对象作为该事件的参数(但是必须显示地被指定),这个对象就是event对象,它包含了一些属性和方法,用于不同的场合。如下:
$('p:first').click(function(event){
//event对象可以使用了
});
5:有时我们不希望冒泡或默认的事件发生,这样就需要一些jQuery的的方法阻止冒泡和默认的事件了。可以通过以下三种方法做到不同程度的阻止。
A:return false --->In event handler ,prevents default behavior and event bubbing 。
return false 在事件的处理中,可以阻止默认事件和冒泡事件。
B:event.preventDefault()---> In event handler ,prevent default event (allows bubbling) 。
event.preventDefault()在事件的处理中,可以阻止默认事件但是允许冒泡事件的发生。
C:event.stopPropagation()---> In event handler ,prevent bubbling (allows default behavior).
event.stopPropagation()在事件的处理中,可以阻止冒泡但是允许默认事件的发生。
代码如:
$('input:submit').click(function(){return false;//去掉试试效果
})
jQuery阻止冒泡和HTML默认操作的更多相关文章
- js阻止冒泡事件及默认操作
1. 事件目标 现在,事件处理程序中的变量event保存着事件对象.而event.target属性保存着发生事件的目标元素.这个属性是DOM API中规定的,但是没有被所有浏览器实现 .jQuery对 ...
- jquery阻止冒泡事件行为发生
<div onclick="a()"> <p onclick="b()"></p> </div> div和p元素 ...
- jquery 阻止冒泡事件和阻止默认事件
jQuery 冒泡和默认事件: <!DOCTYPE html> <html lang="en"> <head> <meta charset ...
- JQuery阻止冒泡事件on绑定中异常情况分析
科普下事件冒泡以及默认行为,以下面例子举列子: 事件冒泡:当点击内部button元素时,会触发自身及外层 a的点击事件,这就是事件冒泡引起的.事件会随着 DOM 的层次结构依次向上传播. 事件 ...
- 【笔记】jquery阻止冒泡事件发生的语句
时间触发时会执行两个步骤:1.捕获 2.冒泡,而很多浏览器包括jquery都不支持捕获动作所以只能执行冒泡动作. 所谓冒泡就是当点击就是事件的执行顺序,本人的理解为:但某一元素触发时间时它的祖先元素( ...
- jQuery 阻止冒泡和默认事件
jQuery event.preventDefault() 方法 event.preventDefault() 方法阻止元素发生默认的行为. 例如: 当点击提交按钮时阻止对表单的提交 阻止以下 URL ...
- jquery阻止冒泡和阻止默认事件
event.stopPropagation(); event.preventDefault(); http://www.cnblogs.com/qixuejia/archive/2013/10/10/ ...
- jquery阻止冒泡事件:$('span').bind("click",function(event){event.stopPropagation();})(有用源)
冒泡事件就是点击子节点,会向上触发父节点,祖先节点的点击事件. <body> <div id="content"> 外层div元素 <span> ...
- js阻止冒泡事件和默认事件的方法
阻止默认事件 function stopDeFault(e){ if(e&&e.preventDefault){//非IE e.preventDefault(); }else{//IE ...
随机推荐
- 高级I/O之readv和writev函数
readv和writev函数用于在一次函数调用中读.写多个非连续缓冲区.有时也将这两个函数称为散布读(scatter read)和聚集写(gather write). #include <sys ...
- Eclipse对printf()不能输出到控制台的解决方法
方案1: 在main 语句中加一条 setbuf(stdout,NULL); 这个即可. 在ecplise下使用cdt开发c程序,发现运行后终端没有输出,停止后会输出,通过在main中添加 setbu ...
- Asp.Net 之 调用分享接口
一.后台分享方式 腾讯QQ.腾讯空间.腾讯微博.新浪微博分享接口,如下: 注意:在网站对接前,请先申请注册好您的QQ登录appid.新浪登录Appkey.腾讯微博appkey. //腾讯QQ分享 ht ...
- Android(java)学习笔记69:JDK5之后的Lock锁的概述和使用
1. Lock锁的概述: java.util.concurrent.locks,接口Lock 首先Lock是一个接口,Lock实现提供了比使用synchronized方法 和 同步代码块更为广泛的锁定 ...
- Apache配置文件中的deny与allow小结
今天在公司配置Zend本地Apache环境的时候,发现在zend.conf中的权限控制中的几段句子,如下所示: 复制代码代码如下: <Location /server-status> ...
- Android 自学之滚动视图ScrollView
滚动视图ScrollView由FarmeLayout派生而出,他就是一个用于为普通组件添加垂直滚动条的组件:ScrollView里面最多包含一个组件,而ScrollView的作用就是为该组件添加一个垂 ...
- hishop网站迁移后出现DataProtectionConfigurationProvider错误(转)
配置错误说明: 在处理向该请求提供服务所需的配置文件时出错.请检查下面的特定错误详细信息并适当地修改配置文件.分析器错误信息: 未能使用提供程序“DataProtectionConfiguration ...
- img与父元素的间隙解决
近来在做H5页面时,突然发现一个问题,使用一个div包裹一个img,在手机预览时,发现图片与div之间有间隙. 当时第一反应就是,是不是间距没有设置为0,于是预览了下代码: .active img { ...
- Ehcache(2.9.x) - API Developer Guide, Cache Eviction Algorithms
About Cache Eviction Algorithms A cache eviction algorithm is a way of deciding which element to evi ...
- Nginx - Additional Modules, Content and Encoding
The following set of modules provides functionalities having an effect on the contents served to the ...