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


一、冒泡事件简介

当我们点击一个控件的时候,如果包括这个控件的父控件也有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');
        }
    };)
});



相关阅读:
HTML5几个设计和修改的页面范例分享
.NET运行界面上,实现随意拖动控件的方法
用PHP提取中英文词语以及数字的首字母的方法介绍
Win7复制文件时提示错误代码0X80070057的解决方法
javascript实现动态加载CSS
js实现的黑背景灰色二级导航菜单效果代码
PHP页面中文乱码分析
PHP学习笔记(一) 简单了解PHP
Jquery响应回车键直接提交表单操作代码
MFC程序对文件的处理方法
js简单实现交换Li的值
Win10 RS1预览版14271内置Defender离线杀毒和之前有什么区别?
win10任务栏电源图标不见了或者显示灰色该怎么办?
open 动态修改img的onclick事件示例代码
快速导航
PHP MySQL HTML CSS JavaScript MSSQL AJAX .NET JSP Linux Mac ASP 服务器 SQL jQuery C# C++ java Android IOS oracle MongoDB SQLite wamp 交通频道 作文范文 大班主题说课稿:我长大了 从商鞅变法看企业如何改革 "永别"放弃 秋季运动会广播稿20字 初中初一作文750字:澳门游 初中初一作文700字:人间处处有真情 小学五年级作文400字:正月十五闹元宵 今生,在文字里为你书写地老天荒 《巴黎圣母院》英语读后感 初中初一作文600字:面对诱惑 一个星期的快乐之旅——书之旅 经济管理学院会计寒假实习报告范文 八月絮语 卖药人作文500字 [图文]我心中的榜样 小学2012—2013学年第二学期少先队德育工作计划 二年级班主任工作总结(小学) 带上简历之外的东西去面试 以报答为题的作文 心爱小狗300字 斯希蒙尼克奥赫岛 元旦红领巾广播稿 相别梦如花 职场中你是否正在经历着“被冷冻” 审计的监督服务总结 只是想让你知道,在你身上我不想留下任何遗憾 洛阳春 留点感激在心中作文500字 二年,四次,神技乎? 好心情400字作文 妈妈珍重作文500字 校园卡的记忆作文1100字 这个称谓——写在母亲节 2015高二上学期班主任工作总结 做一个武则天一样的女人。。。 妈妈,我想对您说``````作文100字 2015员工调岗申请书 心愿400字作文 漫话探险的作文600字 没有不怕死的人 青春--却是流星(3)作文800字 某镇解放思想大讨论活动查摆阶段工作总结 2012年12月份学校德育工作总结 关于建立党员与群众零距离恳谈制度的意见 从何时起 关于西湖美景的作文 2017早安问候语句子 红尘相隔怨了谁 春节700字 那一阵疯狂的风雨

Copyright © 2016 phpStudy |