jQuery阻止冒泡和HTML默认操作


Posted in Javascript onNovember 17, 2010

1:jQuery是一个快捷简便的JavaScript框架,说道框架可以直接理解为就是对原来底层的东西进行了封装使得开发者能够利用这个框架快速开发。

   2:在当今的各个浏览器中都支持事件的冒泡,所谓的冒泡可以这样理解:

       条件:外层有一个DIV元素,在内层有一个P元素,他两存在这样的关系:DIV是P元素的父元素,而P是外层DIV的子元素,他们之间存在包含和被包含的关系。
       事件:现在我们都在这两个元素上绑定相同的事件,比如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()在事件的处理中,可以阻止冒泡但是允许默认事件的发生。

代码如:

       $('.menu li').click(function(){
            $(this).find('ul').toggle();
            return false;//去掉试试效果
            })

Javascript 相关文章推荐
Array的push与unshift方法性能比较分析
Mar 05 Javascript
jQuery的显示和隐藏方法与css隐藏的样式对比
Oct 18 Javascript
基于jquery实现的文字向上跑动类似跑马灯的效果
Jun 17 Javascript
jQuery插件datalist实现很好看的input下拉列表
Jul 14 Javascript
js实现select跳转菜单新窗口效果代码分享(超简单)
Aug 21 Javascript
Jquery+ajax+JAVA(servlet)实现下拉菜单异步取值
Mar 23 Javascript
Vue.js基础知识汇总
Apr 27 Javascript
indexedDB bootstrap angularjs之 MVC DOMO (应用示例)
Jun 20 Javascript
vue2.0+vue-dplayer实现hls播放的示例
Mar 02 Javascript
javascript显示动态时间的方法汇总
Jul 06 Javascript
AngularJs的UI组件ui-Bootstrap之Tooltip和Popover
Jul 13 Javascript
使用Vue 自定义文件选择器组件的实例代码
Mar 04 Javascript
菜鸟学习JavaScript小实验之函数引用
Nov 17 #Javascript
return false,对阻止事件默认动作的一些测试代码
Nov 17 #Javascript
javascript利用初始化数据装配模版的实现代码
Nov 17 #Javascript
javascript拓展DOM操作 prependChild insertAfert
Nov 17 #Javascript
Javascript 静态页面实现随机显示广告的办法
Nov 17 #Javascript
Json对象替换字符串占位符实现代码
Nov 17 #Javascript
xml文档转换工具,附图表例子(hta)
Nov 17 #Javascript
You might like
BBS(php & mysql)完整版(二)
2006/10/09 PHP
详解PHP中instanceof关键字及instanceof关键字有什么作用
2015/11/05 PHP
WordPress中用于获取文章作者与分类信息的方法整理
2015/12/17 PHP
PHP关键特性之命名空间实例详解
2017/05/06 PHP
PHP中trait使用方法详细介绍
2017/05/21 PHP
JavaScript 利用Cookie记录用户登录信息
2009/12/08 Javascript
jquery在IE、FF浏览器的差别详细探讨
2013/04/28 Javascript
Jquery Uploadify多文件上传带进度条且传递自己的参数
2013/08/28 Javascript
javascript禁用键盘功能键让右击及其他键无效
2013/10/09 Javascript
JavaScript中的对象的extensible属性介绍
2014/12/30 Javascript
javascript伸缩菜单栏实现代码分享
2015/11/12 Javascript
JS判断图片是否加载完成方法汇总(最新版)
2016/05/13 Javascript
深入理解jQuery中的事件冒泡
2016/05/24 Javascript
JS+html5 canvas实现的简单绘制折线图效果示例
2017/03/13 Javascript
JS+canvas绘制的动态机械表动画效果
2017/09/12 Javascript
用vue写一个仿简书的轮播图的示例代码
2018/03/13 Javascript
vue+vuex+json-seiver实现数据展示+分页功能
2019/04/11 Javascript
构建大型 Vue.js 项目的10条建议(小结)
2019/11/14 Javascript
[01:14:05]《加油DOTA》第四期
2014/08/25 DOTA
[20:39]DOTA2-DPC中国联赛 正赛开幕式 1月18日
2021/03/11 DOTA
python字典多条件排序方法实例
2014/06/30 Python
详解Python中的各种函数的使用
2015/05/24 Python
老生常谈进程线程协程那些事儿
2017/07/24 Python
Python异常处理操作实例详解
2018/05/10 Python
python smtplib模块自动收发邮件功能(二)
2018/05/22 Python
Python快速查找list中相同部分的方法
2018/06/27 Python
python打印直角三角形与等腰三角形实例代码
2019/10/20 Python
Python scrapy爬取小说代码案例详解
2020/07/09 Python
美国时尚孕妇装品牌:A Pea in the Pod
2017/07/16 全球购物
人力资源经理自我评价
2014/01/04 职场文书
校园歌咏比赛主持词
2014/03/18 职场文书
松材线虫病防治方案
2014/06/15 职场文书
mybatis中注解与xml配置的对应关系和对比分析
2021/08/04 Java/Android
如何在python中实现ECDSA你知道吗
2021/11/23 Python
mysql分组后合并显示一个字段的多条数据方式
2022/01/22 MySQL
Nginx速查手册及常见问题
2022/04/07 Servers