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高级程序设计(第3版)学习笔记11 内建js对象
Oct 11 Javascript
jquery.bgiframe.js在IE9下提示INVALID_CHARACTER_ERR错误
Jan 11 Javascript
jquery实现图片等比例缩放以及max-width在ie中不兼容解决
Mar 21 Javascript
JavaScript知识点总结(六)之JavaScript判断变量数据类型
May 31 Javascript
AngularJS基础 ng-model-options 指令简单示例
Aug 02 Javascript
jQuery remove()过滤被删除的元素(推荐)
Jul 18 jQuery
BootStrap点击保存后实现模态框自动关闭的思路(模态框)
Sep 26 Javascript
Node Puppeteer图像识别实现百度指数爬虫的示例
Feb 22 Javascript
JavaScript中的回调函数实例讲解
Jan 27 Javascript
JavaScript和TypeScript中的void的具体使用
Sep 12 Javascript
Vue常用传值方式、父传子、子传父及非父子实例分析
Feb 24 Javascript
el-table表头根据内容自适应完美解决表头错位和固定列错位
Jan 07 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查询数据库中满足条件的记录条数(两种实现方法)
2013/01/29 PHP
php中simplexml_load_string使用实例分享
2014/02/13 PHP
Laravel重写用户登录简单示例
2016/10/08 PHP
PHP实现在windows下配置sendmail并通过mail()函数发送邮件的方法
2017/06/20 PHP
取选中的radio的值
2010/01/11 Javascript
GWT中复制到剪贴板 js+flash实现复制 兼容性比较好
2010/03/07 Javascript
javascript多种数据类型表格排序代码分析
2010/09/11 Javascript
jquery uaMatch源代码
2011/02/14 Javascript
javascript 判断中文字符长度的函数代码
2012/08/27 Javascript
固定网页背景图同时保持图片比例的思路代码
2013/08/15 Javascript
Jquery中children与find之间的区别详细解析
2013/11/29 Javascript
js获取字符串最后一位方法汇总
2014/11/13 Javascript
浅谈javascript基础之客户端事件驱动
2016/06/10 Javascript
解析如何利用iframe标签以及js制作时钟
2016/12/08 Javascript
Vue.use()在new Vue() 之前使用的原因浅析
2019/08/26 Javascript
简单学习Python time模块
2016/04/29 Python
Python中%是什么意思?python中百分号如何使用?
2018/03/20 Python
python在openstreetmap地图上绘制路线图的实现
2019/07/11 Python
Python使用matplotlib实现交换式图形显示功能示例
2019/09/06 Python
Python 私有化操作实例分析
2019/11/21 Python
python十进制转二进制的详解
2020/02/07 Python
使用Python对Dicom文件进行读取与写入的实现
2020/04/20 Python
python如何查看网页代码
2020/06/07 Python
CSS3 Flex 弹性布局实例代码详解
2018/11/01 HTML / CSS
使用HTML5捕捉音频与视频信息概述及实例
2018/08/22 HTML / CSS
用html5绘制折线图的实例代码
2016/03/25 HTML / CSS
HelloFresh澳大利亚:订购你的美味食品盒、健康餐食
2018/03/28 全球购物
下述程序的作用是计算机数组中的最大元素值及其下标
2012/11/26 面试题
积极分子思想汇报
2014/01/04 职场文书
餐饮业员工工作决心书
2014/03/11 职场文书
寄语是什么意思
2014/04/10 职场文书
群众路线教育实践活动民主生活会个人检查对照思想汇报
2014/10/04 职场文书
先进人物事迹材料
2014/12/29 职场文书
学会感恩主题班会
2015/08/12 职场文书
校园安全主题班会
2015/08/12 职场文书
python中使用redis用法详解
2022/12/24 Redis