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 相关文章推荐
一个小型js框架myJSFrame附API使用帮助
Jun 28 Javascript
在线编辑器中换行与内容自动提取
Apr 24 Javascript
仅Firefox中链接A无法实现模拟点击以触发其默认行为
Jul 31 Javascript
探讨JQUERY JSON的反序列化类 using问题的解决方法
Dec 19 Javascript
jQuery操作JSON的CRUD用法实例
Feb 25 Javascript
jQuery移动端日期(datedropper)和时间(timedropper)选择器附源码下载
Apr 19 Javascript
原生js实现倒计时--2018
Feb 21 Javascript
js传递数组参数到后台controller的方法
Mar 29 Javascript
JSON字符串操作移除空串更改key/value的介绍
Jan 05 Javascript
React优化子组件render的使用
May 12 Javascript
layui 对table中的数据进行转义的实例
Sep 12 Javascript
原生JS实现微信通讯录
Jun 18 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
定义php常量的详解
2013/06/09 PHP
PHP中echo和print的区别
2014/08/28 PHP
win平台安装配置Nginx+php+mysql 环境
2016/01/12 PHP
PHP页面跳转实现延时跳转的方法
2016/12/10 PHP
农历与西历对照
2006/09/06 Javascript
Javascript的闭包
2009/12/31 Javascript
JavaScript实现网页图片等比例缩放实现代码及调用方式
2013/02/25 Javascript
javascript表单验证使用示例(javascript验证邮箱)
2014/01/07 Javascript
jQuery中innerHeight()方法用法实例
2015/01/19 Javascript
js判断浏览器版本以及浏览器内核的方法
2015/01/20 Javascript
jquery让指定的元素闪烁显示的方法
2015/03/17 Javascript
原创jQuery弹出层插件分享
2015/04/02 Javascript
通过设置CSS中的position属性来固定层的位置
2015/12/14 Javascript
详解利用Angular实现多团队模块化SPA开发框架
2017/11/27 Javascript
使用webpack构建应用的方法步骤
2019/03/04 Javascript
小程序自定义单页面、全局导航栏的实现代码
2019/03/15 Javascript
JS 自执行函数原理及用法
2019/08/05 Javascript
js实现全选和全不选
2020/07/28 Javascript
[05:11]TI9战队采访——VIRTUSPRO
2019/08/22 DOTA
详解Python3.1版本带来的核心变化
2015/04/07 Python
Python中实现参数类型检查的简单方法
2015/04/21 Python
在Python的Django框架中用流响应生成CSV文件的教程
2015/05/02 Python
Python正则表达式教程之三:贪婪/非贪婪特性
2017/03/02 Python
python pandas中对Series数据进行轴向连接的实例
2018/06/08 Python
Python小工具之消耗系统指定大小内存的方法
2018/12/03 Python
HTML5 Canvas之测试浏览器是否支持Canvas的方法
2015/01/01 HTML / CSS
如何使用canvas绘制可移动网格的示例代码
2020/12/14 HTML / CSS
StubHub智利:购买和出售您的门票
2016/11/23 全球购物
西班牙最好的在线购买葡萄酒的商店:Vinoseleccion
2019/10/30 全球购物
大学生求职自我评价
2014/01/16 职场文书
投资合作协议书范本
2014/04/17 职场文书
平安建设汇报材料
2014/12/29 职场文书
办公室岗位职责
2015/02/04 职场文书
2015年语言文字工作总结
2015/07/23 职场文书
3招让你摆脱即兴讲话冷场尴尬
2019/08/08 职场文书
你真的会用Mysql的explain吗
2022/03/31 MySQL