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 插件实现图片延迟加载效果代码
Feb 06 Javascript
javascript 通用简单的table选项卡实现
May 07 Javascript
深入探寻javascript定时器
Jan 02 Javascript
详解win7 cmd执行vue不是内部命令的解决方法
Jul 27 Javascript
基于casperjs和resemble.js实现一个像素对比服务详解
Jan 10 Javascript
原生实现一个react-redux的代码示例
Jun 08 Javascript
angularjs http与后台交互的实现示例
Dec 21 Javascript
vue-cli3 配置开发与测试环境详解
May 17 Javascript
微信小程序实现折线图的示例代码
Jun 07 Javascript
vue通信方式EventBus的实现代码详解
Jun 10 Javascript
js实现for循环跳过undefined值示例
Jul 02 Javascript
jQuery实现穿梭框效果
Jan 19 jQuery
菜鸟学习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与已存在的Java应用程序集成
2006/10/09 PHP
用js实现输入提示(自动完成)的实例代码
2013/06/14 Javascript
javascript实现拖动元素交换位置
2015/11/29 Javascript
基于jquery实现三级下拉菜单
2016/05/10 Javascript
jsp 网站引入外部css或者js失效问题解决
2016/10/31 Javascript
详解jquery easyui之datagrid使用参考
2016/12/05 Javascript
Bootstrap CSS组件之导航条(navbar)
2016/12/17 Javascript
RequireJs的使用详解
2017/02/19 Javascript
js实现canvas保存图片为png格式并下载到本地的方法
2017/08/31 Javascript
vue指令只能输入正数并且只能输入一个小数点的方法
2018/06/08 Javascript
vue.js单文件组件中非父子组件的传值实例
2018/09/13 Javascript
Vue表单绑定的实例代码(单选按钮,选择框(单选时,多选时,用 v-for 渲染的动态选项)
2019/05/13 Javascript
laravel实现中文和英语互相切换的例子
2019/09/30 Javascript
详解Vue.js 作用域、slot用法(单个slot、具名slot)
2019/10/15 Javascript
ElementUI之Message功能拓展详解
2019/10/18 Javascript
微信小程序实现文件预览
2020/10/22 Javascript
[02:14]DOTA2英雄基础教程 修补匠
2013/12/23 DOTA
python求crc32值的方法
2014/10/05 Python
Python中的作用域规则详解
2015/01/30 Python
Python如何实现文本转语音
2016/08/08 Python
梯度下降法介绍及利用Python实现的方法示例
2017/07/12 Python
pandas创建新Dataframe并添加多行的实例
2018/04/08 Python
想学python 这5本书籍你必看!
2018/12/11 Python
用Python识别人脸,人种等各种信息
2019/07/15 Python
python Yaml、Json、Dict之间的转化
2020/10/19 Python
马来西亚领先的在线礼品店:Giftr
2018/08/23 全球购物
优衣库台湾官网:UNIQLO台湾
2019/02/01 全球购物
Notino匈牙利:购买香水和化妆品
2019/04/12 全球购物
Notino芬兰:购买香水和化妆品
2019/04/15 全球购物
Spongelle官网:美国的创意护肤洗护品牌
2019/05/15 全球购物
餐厅销售主管职责范本
2014/02/19 职场文书
离婚协议书范本样本
2014/08/19 职场文书
关于有小孩的离婚协议书
2014/10/26 职场文书
同意离婚答辩状
2015/05/22 职场文书
中国梦党课学习心得体会
2016/01/05 职场文书
委托书范本格式
2019/04/18 职场文书