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 相关文章推荐
javascript面向对象之Javascript 继承
May 04 Javascript
ExtJS4中使用mixins实现多继承示例
Dec 03 Javascript
ECMAScript 5中的属性描述符详解
Mar 02 Javascript
JavaScript基础教程——入门必看篇
May 20 Javascript
各式各样的导航条效果css3结合jquery代码实现
Sep 17 Javascript
Vue不能检测到Object/Array更新的情况的解决
Jun 26 Javascript
angular4+百分比进度显示插件用法示例
May 05 Javascript
微信小程序mpvue点击按钮获取button值的方法
May 29 Javascript
原生js实现二级联动菜单
Nov 27 Javascript
JavaScript oncopy事件用法实例解析
May 13 Javascript
在webstorm中配置less的方法详解
Sep 25 Javascript
JavaScript十大取整方法实例教程
Dec 03 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
重置版宣传动画
2020/04/09 魔兽争霸
php源代码安装常见错误与解决办法分享
2013/05/28 PHP
PHP之生成GIF动画的实现方法
2013/06/07 PHP
如何使用PHP给图片加水印
2016/10/12 PHP
PHP数据库处理封装类实例
2016/12/24 PHP
详解laravel passport OAuth2.0的4种模式
2019/11/04 PHP
javascript 对表格的行和列都能加亮显示
2008/12/26 Javascript
javascript 得到变量类型的函数
2010/05/19 Javascript
javascript 子窗体父窗体相互传值方法
2010/05/31 Javascript
你必须知道的Javascript知识点之"深入理解作用域链"的介绍
2013/04/23 Javascript
Javascript 完美运动框架(逐行分析代码,让你轻松了运动的原理)
2015/01/23 Javascript
使用mouse事件实现简单的鼠标经过特效
2015/01/30 Javascript
JavaScript实现SHA-1加密算法的方法
2015/03/11 Javascript
使用jquery提交form表单并自定义action的方法
2016/05/25 Javascript
jQuery使用正则表达式限制文本框只能输入数字
2016/06/18 Javascript
Bootstrap零基础入门教程(三)
2016/07/18 Javascript
jQuery插件zTree实现获取一级节点数据的方法
2017/03/08 Javascript
VUE搭建手机商城心得和遇到的坑
2019/02/21 Javascript
深入了解响应式React Native Echarts组件
2019/05/29 Javascript
vue框架制作购物车小球动画效果实例代码
2019/09/26 Javascript
Element Popover 弹出框的使用示例
2020/07/26 Javascript
[04:02]2014DOTA2国际邀请赛 BBC每日综述中国战队将再度登顶
2014/07/21 DOTA
[00:34]TI7不朽珍藏III——地穴编织者不朽展示
2017/07/15 DOTA
Python中replace方法实例分析
2014/08/20 Python
简单介绍使用Python解析并修改XML文档的方法
2015/10/15 Python
Python解析excel文件存入sqlite数据库的方法
2016/11/15 Python
有趣的python小程序分享
2017/12/05 Python
Python参数解析模块sys、getopt、argparse使用与对比分析
2019/04/02 Python
Python列表元素常见操作简单示例
2019/10/25 Python
解决Pytorch训练过程中loss不下降的问题
2020/01/02 Python
flask框架url与重定向操作实例详解
2020/01/25 Python
使用placeholder属性设置input文本框的提示信息
2020/02/19 HTML / CSS
粉红色的鲸鱼:Vineyard Vines
2018/02/17 全球购物
基于tensorflow权重文件的解读
2021/05/26 Python
MySQL系列之九 mysql查询缓存及索引
2021/07/02 MySQL
java项目构建Gradle的使用教程
2022/03/24 Java/Android