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 面向对象 function类
May 13 Javascript
JavaScript 2048 游戏实例代码(简单易懂)
Mar 25 Javascript
Vue.js每天必学之过滤器与自定义过滤器
Sep 07 Javascript
详解React 16 中的异常处理
Jul 28 Javascript
详解jquery插件jquery.viewport.js学习使用方法
Sep 08 jQuery
vue v-model实现自定义样式多选与单选功能
Jul 05 Javascript
详解使用mpvue开发github小程序总结
Jul 25 Javascript
react native 文字轮播的实现示例
Jul 27 Javascript
jQuery利用FormData上传文件实现批量上传
Dec 04 jQuery
解决layer 关闭当前弹窗 关闭遮罩层 input值获取不到的问题
Sep 25 Javascript
JavaScript复制变量三种方法实例详解
Jan 09 Javascript
原生JavaScript实现拖动校验功能
Sep 29 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
iis6手工创建网站后无法运行php脚本的解决方法
2017/06/08 PHP
Yii实现微信公众号场景二维码的方法实例
2020/08/30 PHP
js textarea自动增高并隐藏滚动条
2009/12/16 Javascript
Juqery Html(),append()等方法的Bug解决方法
2010/12/13 Javascript
jQuery获取文本节点之 text()/val()/html() 方法区别
2011/03/01 Javascript
在javaScript中关于submit和button的区别介绍
2013/10/20 Javascript
Js实现手机发送验证码时按钮延迟操作
2014/06/20 Javascript
jquery提示效果实例分析
2014/11/25 Javascript
js实现按钮控制图片360度翻转特效的方法
2015/02/17 Javascript
jQuery构造函数init参数分析续
2015/05/13 Javascript
javascript实现的多个层切换效果通用函数实例
2015/07/06 Javascript
javascript每日必学之条件分支
2016/02/17 Javascript
XML、HTML、CSS与JS的区别整理
2016/02/18 Javascript
js实现符合国情的日期插件详解
2017/01/19 Javascript
详解Angular2响应式表单
2017/06/14 Javascript
怎样使你的 JavaScript 代码简单易读(推荐)
2019/04/16 Javascript
vue列表单项展开收缩功能之this.$refs的详解
2019/05/05 Javascript
浅谈vue单页面中有多个echarts图表时的公用代码写法
2020/07/19 Javascript
对于Python中线程问题的简单讲解
2015/04/03 Python
python使用分治法实现求解最大值的方法
2015/05/12 Python
python函数装饰器用法实例详解
2015/06/04 Python
pycharm如何实现跨目录调用文件
2020/02/28 Python
Python批量将图片灰度化的实现代码
2020/04/11 Python
python缩进长度是否统一
2020/08/02 Python
h5网页水印SDK的实现代码示例
2019/02/19 HTML / CSS
亚洲领先的旅游体验市场:Voyagin
2019/11/23 全球购物
介绍一下Linux文件的记录形式
2013/09/29 面试题
Java程序员面试题
2016/09/27 面试题
大四毕业生学习总结的自我评价
2013/10/31 职场文书
成语的广告词
2014/03/19 职场文书
销售员岗位职责
2014/06/09 职场文书
追讨欠款律师函
2015/05/27 职场文书
运动会新闻稿
2015/07/17 职场文书
初级职称评定工作总结
2015/08/13 职场文书
田径运动会广播稿
2015/08/19 职场文书
vue实力踩坑之push当前页无效
2022/04/10 Vue.js