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 相关文章推荐
文本框根据输入内容自适应高度的代码
Oct 24 Javascript
window.location不跳转的问题解决方法
Apr 17 Javascript
jQuery插件简单学习实例教程
Jul 01 Javascript
html+js实现简单的计算器代码(加减乘除)
Jul 12 Javascript
JS类的定义与使用方法深入探索
Nov 26 Javascript
VUE实现日历组件功能
Mar 13 Javascript
基于angular实现模拟微信小程序swiper组件
Jun 11 Javascript
ES6新增数据结构WeakSet的用法详解
Aug 07 Javascript
Vue.js划分组件的方法
Oct 29 Javascript
OkHttp踩坑随笔为何 response.body().string() 只能调用一次
Jan 08 Javascript
详解如何在vue项目中引入elementUI组件
Feb 11 Javascript
vue移动端html5页面根据屏幕适配的四种解决方法
Oct 19 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
不用数据库的多用户文件自由上传投票系统(2)
2006/10/09 PHP
浅析php header 跳转
2013/06/17 PHP
destoon调用自定义模板及样式的公告栏
2014/06/21 PHP
使用ob系列函数实现PHP网站页面静态化
2014/08/13 PHP
PHP多文件上传类实例
2015/03/07 PHP
php+redis消息队列实现抢购功能
2018/02/08 PHP
使用javascript过滤html的字符串(注释标记法)
2013/07/08 Javascript
JS JSON对象转为字符串的简单实现方法
2013/11/18 Javascript
Extjs4中Form的使用之本地hiddenfield
2013/11/26 Javascript
对比分析json及XML
2014/11/28 Javascript
jQuery中delegate()方法用法实例
2015/01/19 Javascript
javascript中Object使用详解
2015/01/26 Javascript
jQuery匹配文档链接并添加class的方法
2015/06/26 Javascript
jquery解析json格式数据的方法(对象、字符串)
2015/11/24 Javascript
JS实现简单易用的手机端浮动窗口显示效果
2016/09/07 Javascript
jQuery通过ajax快速批量提交表单数据
2016/10/25 Javascript
jQuery简单自定义图片轮播插件及用法示例
2016/11/21 Javascript
layui中layer前端组件实现图片显示功能的方法分析
2017/10/13 Javascript
浅析JavaScript中的特殊数据类型
2017/12/15 Javascript
实例讲解JavaScript预编译流程
2019/01/24 Javascript
浅谈Vue SSR中的Bundle的具有使用
2019/11/21 Javascript
vue+axios全局添加请求头和参数操作
2020/07/24 Javascript
[02:40]DOTA2英雄基础教程 先知
2013/11/29 DOTA
Python实现Tab自动补全和历史命令管理的方法
2015/03/12 Python
python用reduce和map把字符串转为数字的方法
2016/12/19 Python
使用Python的Scrapy框架十分钟爬取美女图
2016/12/26 Python
详解Python的循环结构知识点
2019/05/20 Python
Python利用scapy实现ARP欺骗的方法
2019/07/23 Python
pytorch获取vgg16-feature层输出的例子
2019/08/20 Python
CSS3 @media的基本用法总结
2019/09/10 HTML / CSS
农民入党思想汇报
2014/01/03 职场文书
乡镇三项教育实施方案
2014/03/30 职场文书
《风娃娃》教学反思
2014/04/19 职场文书
赡养老人协议书
2014/04/21 职场文书
html5表单的required属性使用
2021/07/07 HTML / CSS
php png失真的原因及解决办法
2021/10/24 PHP