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 相关文章推荐
dojo学习第一天 Tab选项卡 实现
Aug 28 Javascript
web开发人员学习jQuery的6大理由及jQuery的优势介绍
Jan 03 Javascript
JS设置cookie、读取cookie、删除cookie
Apr 17 Javascript
Nginx上传文件全部缓存解决方案
Aug 17 Javascript
JavaScript 判断一个对象{}是否为空对象的简单方法
Oct 09 Javascript
原生js实现轮播图的示例代码
Feb 20 Javascript
Angular企业级开发——MVC之控制器详解
Feb 20 Javascript
jquery学习笔记之无new构建详解
Dec 07 jQuery
Node.js EventEmmitter事件监听器用法实例分析
Jan 07 Javascript
node.js通过url读取文件
Oct 16 Javascript
Vue3 实现双盒子定位Overlay的示例
Dec 22 Vue.js
JavaScript 定时器详情
Nov 11 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 adodb连接mssql解决乱码问题
2009/06/12 PHP
zend framework多模块多布局配置
2011/02/26 PHP
php学习之数据类型之间的转换代码
2011/05/29 PHP
PHP网页游戏学习之Xnova(ogame)源码解读(四)
2014/06/23 PHP
Yii框架的路由配置方法分析
2019/09/09 PHP
FireFox与IE 下js兼容触发click事件的代码
2008/11/20 Javascript
JavaScript事件委托的技术原理探讨示例
2014/04/17 Javascript
javascript获取flash版本号的方法
2014/11/20 Javascript
JavaScript插件化开发教程(六)
2015/02/01 Javascript
jQuery实现跨域iframe接口方法调用
2015/03/14 Javascript
input输入框鼠标焦点提示信息
2015/03/17 Javascript
基于jquery二维码生成插件qrcode
2017/01/07 Javascript
AngularJS 控制器 controller的详解
2017/10/17 Javascript
JS实现的抛物线运动效果示例
2018/01/30 Javascript
Angular resolve基础用法详解
2018/10/03 Javascript
基于Taro的微信小程序模板消息-获取formId功能模块封装实践
2019/07/15 Javascript
JS操作Fckeditor的一些常用方法(获取、插入等)
2020/02/19 Javascript
js实现网页随机验证码
2020/10/19 Javascript
对变量赋值的理解--Pyton中让两个值互换的实现方法
2017/11/29 Python
利用python和ffmpeg 批量将其他图片转换为.yuv格式的方法
2019/01/08 Python
Python Image模块基本图像处理操作小结
2019/04/13 Python
pyqt5移动鼠标显示坐标的方法
2019/06/21 Python
在Pycharm中调试Django项目程序的操作方法
2019/07/17 Python
python爬虫beautifulsoup解析html方法
2020/12/07 Python
Notino意大利:购买香水和化妆品
2018/11/14 全球购物
纽约市的奢华内衣目的地:Anya Lust
2019/08/02 全球购物
土耳其新趋势女装购物网站:Addax
2020/01/07 全球购物
介绍一下grep命令的使用
2015/06/12 面试题
财务管理专业毕业生求职信范文
2013/09/21 职场文书
自我鉴定范文300字
2013/10/01 职场文书
环卫处个人工作总结
2015/03/04 职场文书
医院员工辞职信范文
2015/05/12 职场文书
2015个人年度工作总结范文
2015/05/28 职场文书
“5.12”护士节主持词
2015/07/04 职场文书
团队拓展训练感想
2015/08/07 职场文书
Win Server2016远程桌面如何允许多用户同时登录
2022/06/10 Servers