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简单体验
Jan 10 Javascript
javascript中利用数组实现的循环队列代码
Jan 24 Javascript
基于jquery的cookie的用法
Jan 10 Javascript
jquery的live使用注意事项
Feb 18 Javascript
jquery easyui 对于开始时间小于结束时间的判断示例
Mar 22 Javascript
CSS图片响应式 垂直水平居中
Aug 14 Javascript
JavaScript类型系统之Object详解
Jan 07 Javascript
SelecT下拉框选中和取值的解决方法
Nov 22 Javascript
微信小程序实现点击按钮移动view标签的位置功能示例【附demo源码下载】
Dec 06 Javascript
JS实现读取xml内容并输出到div中的方法示例
Apr 19 Javascript
微信小程序实现时间预约功能
Nov 27 Javascript
mpvue 页面预加载新增preLoad生命周期的两种方式
Oct 17 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(8) php 数组
2010/03/05 PHP
深入php define()函数以及defined()函数的用法详解
2013/06/05 PHP
php实现将任意进制数转换成10进制的方法
2015/04/17 PHP
Zend Framework数据库操作方法实例总结
2016/12/11 PHP
PHP编辑器PhpStrom运行缓慢问题
2017/02/21 PHP
jQuery创建插件的代码分析
2011/04/14 Javascript
没有document.getElementByName方法
2013/08/19 Javascript
JQuery 实现在同一页面锚点链接之间的平滑滚动
2014/10/29 Javascript
javascript中字体浮动效果的简单实例演示
2015/11/18 Javascript
Svg.js实例教程及使用手册详解(一)
2016/05/16 Javascript
全面了解函数声明与函数表达式、变量提升
2016/08/09 Javascript
jquery插入兄弟节点的操作方法
2016/12/07 Javascript
js仿淘宝商品放大预览功能
2017/03/15 Javascript
Jquery获取radio选中的值
2017/05/05 jQuery
Angular4的输入属性与输出属性实例详解
2017/11/29 Javascript
Array数组对象中的forEach、map、filter及reduce详析
2018/08/02 Javascript
js指定日期增加指定月份的实现方法
2018/12/19 Javascript
sortable+element 实现表格行拖拽的方法示例
2019/06/07 Javascript
python中使用xlrd、xlwt操作excel表格详解
2015/01/29 Python
Python的时间模块datetime详解
2017/04/17 Python
简单谈谈Python中的元祖(Tuple)和字典(Dict)
2017/04/21 Python
python使用fcntl模块实现程序加锁功能示例
2017/06/23 Python
Python数据结构之顺序表的实现代码示例
2017/11/15 Python
windows下pycharm安装、创建文件、配置默认模板
2018/07/31 Python
整理HTML5移动端开发的常用触摸事件
2016/04/15 HTML / CSS
Html5页面点击遮罩层背景关闭遮罩层
2020/11/30 HTML / CSS
Hotels.com泰国:酒店预订网站
2019/11/20 全球购物
文秘专业自荐信
2013/10/14 职场文书
合作经营协议书范本
2014/04/17 职场文书
优秀教师个人材料
2014/12/15 职场文书
办公室主任岗位职责
2015/01/31 职场文书
现场施工员岗位职责
2015/04/11 职场文书
2019新员工心得体会
2019/06/25 职场文书
mysql配置SSL证书登录的实现
2021/09/04 MySQL
在js中修改html body的样式
2021/11/11 Javascript
在 Python 中利用 Pool 进行多线程
2022/04/24 Python