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 交通频道 作文范文 高考满分作文:昭君行800字 真心英雄所想到的作文800字 小学五年级作文450字:帅帅 初中生寒假日记500字:花市见闻 “优秀红领巾志愿者”事迹材料 追上你的目光 2014年02月09日03时10分日记 十八届四中全会思想汇报范文2014 郁达夫散文集读后感 社区党委书记两学一做心得体会 四川方言笑话 令我难忘的一件事作文300字 谢谢你们的爱,谢谢有你们陪伴着我,谢谢所有爱我的人,谢谢我爱的他!!! 很文艺的简短句子 终止劳动合同通知书模板 建筑业发展状况调研报告 莲花盛开 2014大实话语录 给点阳光我就腐烂 县委办分管办公室信息和督查工作副主任述职报告 一个让我感动的日子作文500字 建立以财务管理要素为核心的财务管理理论体系之构想 赛尔精灵作文 触碰神经的青舂 银行入职心得体会 小学六年级作文600字:春光不自留,莫怪东风恶 假如我会飞翔作文550字 我与三字经 使命与责任350字 20年后的超能汽车500字 8月14日日志作文750字 三年级孝心敬老的作文范文:孝老爱亲 谁也不能训斥我的父亲 我眼中的周楷岩 游丛台公园 坏情绪让你变丑 我最熟悉的同学----向东 我是个“野丫头”作文450字 国庆节促销活动总结PPT 枯河边的树_600字 足球与世界杯 铅笔、橡皮和转笔刀600字 夜临檐下(诗歌十首) 药食同源 桐乡 好段摘抄大全 和同学到玩耍作文450字 创建国家环境保护模范城市工作方案 2013年党支部工作计划范文 作文 看恐龙化石 年轻人的梦想从奋斗,蜗居,裸婚,到北爱......

Copyright © 2016 phpStudy |