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中为String对象添加trim,ltrim,rtrim方法
Sep 22 Javascript
javascript学习(一)构建自己的JS库
Jan 02 Javascript
浅析Node在构建超媒体API中的作用
Jul 30 Javascript
扒一扒JavaScript 预解释
Jan 28 Javascript
JavaScript实现更改网页背景与字体颜色的方法
Feb 02 Javascript
JavaScript弹出新窗口后向父窗口输出内容的方法
Apr 06 Javascript
javascript实现获取字符串hash值
May 10 Javascript
javascript实现根据时间段显示问候语的方法
Jun 18 Javascript
微信小程序 wx.uploadFile在安卓手机上面the same task is working问题解决
Dec 14 Javascript
Vue2.0组件间数据传递示例
Mar 07 Javascript
vuex state及mapState的基础用法详解
Apr 19 Javascript
基于angular实现树形二级表格
Oct 16 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
linux下删除7天前日志的代码(php+shell)
2011/01/02 PHP
PHP异常处理浅析
2015/05/12 PHP
一个PHP实现的轻量级简单爬虫
2015/07/08 PHP
浅谈socket同步和异步、阻塞和非阻塞、I/O模型
2016/12/15 PHP
php下载远程大文件(获取远程文件大小)的实例
2017/06/17 PHP
Javascript对象Clone实例分析
2015/06/09 Javascript
javascript单例模式的简单实现方法
2015/07/25 Javascript
JavaScript实现节点的删除与序号重建实例
2015/08/05 Javascript
属于你的jQuery提示框(Tip)插件
2016/01/20 Javascript
省市联动效果的简单实现代码(推荐)
2016/06/06 Javascript
深入理解JavaScript函数参数(推荐)
2016/07/26 Javascript
Bootstrap3 datetimepicker控件使用实例
2016/12/13 Javascript
详解Vue2.0里过滤器容易踩到的坑
2017/06/01 Javascript
javascript 作用于作用域链的详解
2017/09/27 Javascript
微信小程序Page中data数据操作和函数调用方法
2019/05/08 Javascript
vue+eslint+vscode配置教程
2019/08/09 Javascript
centos 下面安装python2.7 +pip +mysqld
2014/11/18 Python
简单使用Python自动生成文章
2014/12/25 Python
python获取标准北京时间的方法
2015/03/24 Python
python实现八大排序算法(1)
2017/09/14 Python
python使用wxpy实现微信消息防撤回脚本
2019/04/29 Python
基于django ManyToMany 使用的注意事项详解
2019/08/09 Python
YUV转为jpg图像的实现
2019/12/09 Python
关于Pytorch MaxUnpool2d中size操作方式
2020/01/03 Python
Python2与Python3的区别详解
2020/02/09 Python
Python requests设置代理的方法步骤
2020/02/23 Python
python GUI库图形界面开发之PyQt5表单布局控件QFormLayout详细使用方法与实例
2020/03/06 Python
马来西亚时装购物网站:ZALORA马来西亚
2017/03/14 全球购物
公司清洁工岗位职责
2013/12/14 职场文书
党员教师一句话承诺
2014/05/30 职场文书
2016年暑假家长对孩子评语
2015/12/01 职场文书
幼儿园体操比赛口号
2015/12/25 职场文书
《坐井观天》教学反思
2016/02/18 职场文书
Python torch.flatten()函数案例详解
2021/08/30 Python
关于Vue中的options选项
2022/03/22 Vue.js
WCG2010 星际争霸决赛 Flash vs Goojila 1 星际经典比赛回顾
2022/04/01 星际争霸