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 相关文章推荐
用jQuery实现一些导航条切换,显示隐藏的实例代码
Jun 08 Javascript
js判断undefined类型示例代码
Feb 10 Javascript
jQuery使用ajaxSubmit()提交表单示例
Apr 04 Javascript
基于jQuery实现文本框缩放以及上下移动功能
Nov 24 Javascript
浅析JavaScript事件和方法
Feb 28 Javascript
浅析C/C++,Java,PHP,JavaScript,Json数组、对象赋值时最后一个元素后面是否可以带逗号
Mar 22 Javascript
详解JavaScript节流函数中的Throttle
Jul 16 Javascript
最简单纯JavaScript实现Tab标签页切换的方式(推荐)
Jul 25 Javascript
Vue.js实现一个漂亮、灵活、可复用的提示组件示例
Mar 17 Javascript
详解vue.js移动端导航navigationbar的封装
Jul 05 Javascript
浅谈vue加载优化策略
Mar 19 Javascript
vue 限制input只能输入正数的操作
Aug 05 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格式输出文件var_export函数实例
2014/11/15 PHP
详解提高使用Java反射的效率方法
2019/04/29 PHP
jQuery对象数据缓存Cache原理及jQuery.data方法区别介绍
2013/04/07 Javascript
如何使用Jquery获取Form表单中被选中的radio值
2013/08/09 Javascript
JQuery做的一个简单的点灯游戏分享
2014/07/16 Javascript
js判断一个字符串是否包含一个子串的方法
2015/01/26 Javascript
jquery实现用户打分评分特效
2015/05/28 Javascript
JavaScript实现的MD5算法完整实例
2016/02/02 Javascript
浅谈javascript基础之客户端事件驱动
2016/06/10 Javascript
JS实现输入框提示文字点击时消失效果
2016/07/19 Javascript
省市区三级联动jquery实现代码
2020/04/15 Javascript
ES6新特性之Object的变化分析
2017/03/31 Javascript
vue2.0实现前端星星评分功能组件实例代码
2018/02/12 Javascript
解决iView中时间控件选择的时间总是少一天的问题
2018/03/15 Javascript
vue-cli webpack配置文件分析
2019/05/20 Javascript
JavaScript实现图片放大镜效果
2019/06/27 Javascript
解决Vue的文本编辑器 vue-quill-editor 小图标样式排布错乱问题
2020/08/03 Javascript
js闭包的9个使用场景
2020/12/29 Javascript
跟老齐学Python之做一个小游戏
2014/09/28 Python
Python中的localtime()方法使用详解
2015/05/22 Python
python开发之str.format()用法实例分析
2016/02/22 Python
Python中列表与元组的乘法操作示例
2018/02/10 Python
python获取程序执行文件路径的方法(推荐)
2018/04/26 Python
Python dict的常用方法示例代码
2020/06/23 Python
python3的pip路径在哪
2020/06/23 Python
python exit出错原因整理
2020/08/31 Python
CSS实现的一闪而过的图片闪光效果
2014/04/23 HTML / CSS
司机检讨书
2014/02/13 职场文书
学生党员的自我评价范文
2014/03/01 职场文书
教师党的群众路线教育实践活动个人对照检查材料
2014/09/23 职场文书
党员“四风”方面存在问题及整改措施
2014/09/24 职场文书
职代会闭幕词
2015/01/28 职场文书
房地产置业顾问工作总结
2015/10/23 职场文书
2016年党员创先争优承诺书
2016/03/25 职场文书
干货:如何写好工作计划!
2019/05/17 职场文书
Python图片验证码降噪和8邻域降噪
2021/08/30 Python