jQuery中阻止冒泡事件的方法介绍


Posted in Javascript onApril 12, 2014

一、冒泡事件简介

当我们点击一个控件的时候,如果包括这个控件的父控件也有click事件,则会继续执行。
比如:div下的a都有click事件,点击a的时候,会alert出现2次。这个现象叫做冒泡事件。

这个事件从原始元素开始一直冒泡到DOM树的最上层。
目标元素: 任何一个事件的目标元素都是最开始的那个元素,在我们的这个例子中也就是按钮,
并且它在我们的元素对象中以属性的形式出现。使用事件代理的话我们可以把事 件处理器添加到一个元素上,
等待一个事件从它的子级元素里冒泡上来,并且可以很方便地得知这个事件是从哪个元素开始。
注意:
blur、focus、load和unload不能像其它事件一样冒泡。事实上blur和focus可以用事件捕获而非事件冒泡的方法获得(在IE之外的其它浏览器中)。

二、阻止jQuery事件冒泡

jQuery对DOM的事件触发具有冒泡特性。有时利用这一特性可以减少重复代码,但有时候我们又不希望事件冒泡。这个时候就要阻止 jQuery.Event冒泡。

在jQuery.Event的文档中的开头得知,jQuery.Event对象是符合W3C标准的一个事件对象,同时jQuery.Event免去了检查兼容IE的步骤。
jQuery.Event提供了一个非常简单的方法来阻止事件冒泡:event.stopPropagation();

$("p").click(function(event){
     event.stopPropagation();
     // do something
})

但是这个方法对使用live绑定的事件没有作用,需要一个更简单的方法阻止事件冒泡:return false;

$(this).after("Another paragraph!");
return false;  });

兼容多个浏览器的终止冒泡函数:

   function stopDefault(e) {
        //阻止默认浏览器动作(W3C)
        if (e && e.preventDefault)
            e.preventDefault();
        //IE中阻止函数器默认动作的方式
        else
            window.event.returnValue = false;
        return false;
    }

三、使用event.tatget属性 明确事件对象

事件处理程序中的变量event保存着事件对象。而event.tatget属性保存着发生事件的目标元素。这个属性是DOM API中规定的,但是没有被所有浏览器实现。jQuery对这个事件对象进行了必要的扩展,从而在任何浏览器中都能够使用这个属性。通过.target,可以确定DOM中首先接收到事件的元素。而且,我们知道this引用的是处理事件的DOM元素。

使用event.tatget属性 明确事件对象

阻止事件冒泡的代码如下:

$(document).ready(function() {
    $('switcher').click(function(event){
        if(event.target == this)
        {
            $('switcher .button').toggleClass('hidden');
        }
    };)
});

Javascript 相关文章推荐
jQuery 1.3 和 Validation 验证插件1.5.1
Jul 09 Javascript
jQuery中 noConflict() 方法使用
Apr 25 Javascript
Jquery创建一个层当鼠标移动到层上面不消失效果
Dec 12 Javascript
JS遍历Json字符串中键值对先转成JSON对象再遍历
Aug 15 Javascript
js实现单击图片放大图片的方法
Feb 17 Javascript
JavaScript实现可拖拽的拖动层Div实例
Aug 05 Javascript
JS 根据子网掩码,网关计算出所有IP地址范围示例
Apr 23 Javascript
从0开始学Vue
Oct 27 Javascript
JS 实现Base64编码与解码实例详解
Nov 07 Javascript
详解vue中组件参数
Jul 09 Javascript
详解如何制作并发布一个vue的组件的npm包
Nov 10 Javascript
jquery 时间戳转日期过程详解
Oct 12 jQuery
jquery ajax应用中iframe自适应高度问题解决方法
Apr 12 #Javascript
javascript事件冒泡详解和捕获、阻止方法
Apr 12 #Javascript
一个非常全面的javascript URL解析函数和分段URL解析方法
Apr 12 #Javascript
用jquery写的菜单从左往右滑动出现
Apr 11 #Javascript
瀑布流布局代码一例
Apr 11 #Javascript
javascript读写json示例
Apr 11 #Javascript
javascript如何判断输入的url是否正确
Apr 11 #Javascript
You might like
一个php作的文本留言本的例子(五)
2006/10/09 PHP
php实现文章置顶功能的方法
2016/10/20 PHP
PHP Class SoapClient not found解决方法
2018/01/20 PHP
JS OOP包机制,类创建的方法定义
2009/11/02 Javascript
extjs render 用法介绍
2013/09/11 Javascript
jquery map方法使用示例
2014/04/23 Javascript
jQuery Ajax 实例代码 ($.ajax、$.post、$.get)
2016/04/29 Javascript
Bootstrap组件系列之福利篇几款好用的组件(推荐)
2016/06/23 Javascript
Javascript封装id、class与元素选择器方法示例
2017/03/13 Javascript
Ionic2调用本地SQlite实例
2017/04/22 Javascript
详解vue mint-ui源码解析之loadmore组件
2017/10/11 Javascript
Vue 2.5.2下axios + express 本地请求404的解决方法
2018/02/21 Javascript
取消Bootstrap的dropdown-menu点击默认关闭事件方法
2018/08/10 Javascript
解决vue打包后刷新页面报错:Unexpected token
2019/08/27 Javascript
p5.js绘制旋转的正方形
2019/10/23 Javascript
关于vue3.0中的this.$router.replace({ path: '/'})刷新无效果问题
2020/01/16 Javascript
解决新建一个vue项目过程中遇到的问题
2020/10/22 Javascript
[53:15]2018DOTA2亚洲邀请赛3月29日 小组赛A组 LGD VS TNC
2018/03/30 DOTA
tornado框架blog模块分析与使用
2013/11/21 Python
Python遍历zip文件输出名称时出现乱码问题的解决方法
2015/04/08 Python
Python-嵌套列表list的全面解析
2016/06/08 Python
python基于itchat实现微信群消息同步机器人
2017/02/27 Python
Python轻量级ORM框架Peewee访问sqlite数据库的方法详解
2017/07/20 Python
使用Py2Exe for Python3创建自己的exe程序示例
2018/10/31 Python
Python2和Python3之间的str处理方式导致乱码的讲解
2019/01/03 Python
Python协程操作之gevent(yield阻塞,greenlet),协程实现多任务(有规律的交替协作执行)用法详解
2019/10/14 Python
python socket 聊天室实例代码详解
2019/11/14 Python
python实现按关键字筛选日志文件
2019/12/24 Python
Python 2种方法求某个范围内的所有素数(质数)
2020/01/31 Python
Python中Yield的基本用法
2020/10/18 Python
Kathmandu澳洲户外商店:新西兰户外运动品牌
2017/11/12 全球购物
宝拉珍选官方旗舰店:2%水杨酸精华液,收缩毛孔粗大和祛痘
2018/07/01 全球购物
英国曼彻斯特宠物用品品牌:Bunty Pet Products
2019/07/27 全球购物
Lentiamo荷兰:在线订购隐形眼镜、隐形眼镜液和太阳镜
2019/10/25 全球购物
党员廉洁自律个人总结
2015/02/13 职场文书
Python机器学习之KNN近邻算法
2021/05/14 Python