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 鼠标滚轮事件
Apr 09 Javascript
jQuery前台数据获取实现代码
Mar 16 Javascript
json格式的javascript对象用法分析
Jul 04 Javascript
JavaScript学习小结之使用canvas画“哆啦A梦”时钟
Jul 24 Javascript
ionic实现可滑动的tab选项卡切换效果
Apr 15 Javascript
JS基于正则表达式实现的密码强度验证功能示例
Sep 21 Javascript
js实现图片粘贴上传到服务器并展示的实例
Nov 08 Javascript
vue 自定义组件 v-model双向绑定、 父子组件同步通信的多种写法
Nov 27 Javascript
Angular4学习笔记router的简单使用
Mar 30 Javascript
微信小程序中使用Async-await方法异步请求变为同步请求方法
Mar 28 Javascript
vue data对象重新赋值无效(未更改)的解决方式
Jul 24 Javascript
react中props 的使用及进行限制的方法
Apr 28 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性能优化工具篇Benchmark类调试执行时间
2011/12/06 PHP
PHP __autoload()方法真的影响性能吗?
2012/03/30 PHP
ThinkPHP 整合Bootstrap Ajax分页样式
2016/12/23 PHP
PHP大文件切割上传功能实例分析
2019/07/01 PHP
PHP code 验证码生成类定义和简单使用示例
2020/05/27 PHP
JavaScript面向对象之体会[总结]
2008/11/13 Javascript
清空上传控件input file的值
2010/07/03 Javascript
jquery实现textarea输入字符控制(仿微博输入控制字符)
2013/04/26 Javascript
下拉列表选择项的选中在不同浏览器中的兼容性问题探讨
2013/09/18 Javascript
javascript事件冒泡实例分析
2015/05/13 Javascript
jQuery Ajax 异步加载显示等待效果代码分享
2016/08/01 Javascript
详解用函数式编程对JavaScript进行断舍离
2017/09/18 Javascript
Js判断H5上下滑动方向及滑动到顶部和底部判断的示例代码
2017/11/15 Javascript
vue 设置proxyTable参数进行代理跨域
2018/04/09 Javascript
JavaScript实现一个简易的计算器实例代码
2018/05/10 Javascript
如何利用ES6进行Promise封装总结
2019/02/11 Javascript
解决layer弹出层自适应页面大小的问题
2019/09/16 Javascript
基于layui轮播图满屏是高度自适应的解决方法
2019/09/16 Javascript
node.js实现http服务器与浏览器之间的内容缓存操作示例
2020/02/11 Javascript
解决vant title-active-color与title-inactive-color不生效问题
2020/11/03 Javascript
javascript实现数字时钟效果
2021/02/06 Javascript
Python 调用DLL操作抄表机
2009/01/12 Python
Python文件去除注释的方法
2015/05/25 Python
python中的编码知识整理汇总
2016/01/26 Python
Jupyter notebook如何实现指定浏览器打开
2020/05/13 Python
Django+Django-Celery+Celery的整合实战
2021/01/20 Python
Quiksilver美国官网:始于1969年的优质冲浪服和滑雪板外套
2020/04/20 全球购物
应届生护士求职信
2013/11/01 职场文书
村干部承诺书
2014/03/28 职场文书
法人授权委托书公证范本
2014/09/14 职场文书
2015毕业实习推荐信
2015/03/23 职场文书
人间正道是沧桑观后感
2015/06/15 职场文书
你对自己的信用报告有过了解吗?
2019/07/09 职场文书
2019年幼儿园管理条例范本!
2019/07/17 职场文书
pytorch实现线性回归以及多元回归
2021/04/11 Python
Golang: 内建容器的用法
2021/05/05 Golang