js冒泡、捕获事件及阻止冒泡方法详细总结_javascript技巧

javascript, jquery的事件中都存在事件冒泡和事件捕获的问题,下面将两种问题及其解决方案做详细总结。

事件冒泡是一个从子节点向祖先节点冒泡的过程;

事件捕获刚好相反,是从祖先节点到子节点的过程。

给一个jquery点击事件的例子:

代码如下:

复制代码 代码如下:

<!DOCTYPE html>
<meta charset="utf-8">
<title>test</title>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$(function(){
$('#clickMe').click(function(){
alert('hello');
});
$('body').click(function(){
alert('baby');
});
});
</script>
</head>
<body>
<div style="width:100px;height:100px;background-color:red;">
<button type="button" id="button2">click me</button>
<button id="clickMe">click</button>
</div>
</body>
</html>

事件冒泡现象:点击 “id=clickMe” 的button,会先后出现“hello” 和 “baby” 两个弹出框。

分析:当点击 “id=clickMe” 的button时,触发了绑定在button 和 button 父元素及body的点击事件,所以先后弹出两个框,出现所谓的冒泡现象。

事件捕获现象:点击没有绑定点击事件的div和 “id=button2” 的button, 都会弹出 “baby” 的对话框。

在实际的项目中,我们要阻止事件冒泡和事件捕获现象。

阻止事件冒泡方法:

法1:当前点击事件中return false;

复制代码 代码如下:

$('#clickMe').click(function(){
alert('hello');

return false;
});

法2:

复制代码 代码如下:

$('#clickMe').click(function(event){
alert('hello');

var e = window.event || event;

if ( e.stopPropagation ){ //如果提供了事件对象,则这是一个非IE浏览器
e.stopPropagation();
}else{
//兼容IE的方式来取消事件冒泡
window.event.cancelBubble = true;
}
});

貌似捕获事件不能被阻止

时间: 2024-09-30 17:50:28

js冒泡、捕获事件及阻止冒泡方法详细总结_javascript技巧的相关文章

js两种拼接字符串的简单方法(必看)_javascript技巧

如下所示: function(msgArr) { var len = msgArr.length; var n = 0 ; var htmlSpan = ""; for (var j = 0; j < len - 1; j++) { htmlSpan += '<span>·</span>'; } htmlSpan += '<span class="on">·</span>'; var imgs = []; var

JavaScript之IE的fireEvent方法详细解析_javascript技巧

在IE中提供了一个fireEvent方法,顾名思义就是触发某个事件发生的意思.刚开始我以为是会跟平时使用onclick()一样,没想到最近在写javascript入门ppt的时候发现了,原来自己太自以为是了!看来还有很多javascript的细节没有掌握好啊! 现在根据自己的总结详细的记录下fireEvent方法的使用.fireEvent是IE提供的一种方法,msdn文档地址:http://msdn.microsoft.com/en-us/library/ms536423(v=vs.85).as

扩展js对象数组的OrderByAsc和OrderByDesc方法实现思路_javascript技巧

看了一段时间关于js原型的知识,js的扩展方法是基于原型的,如Array.prototype.XXXX就是给Array扩展XXX方法,然后数组都能使用这个方法了. 在对象数组里面经常有根据属性来进行排序的,升序,降序的,于是自己就想写一个类似于C#里面的orderBy的方法,代码如下: 复制代码 代码如下: Array.prototype.OrderByAsc = function (func) { var m = {}; for (var i = 0; i < this.length; i++

Js+Jq获取URL参数的集中方法示例代码_javascript技巧

JQ取值方法: jquery本身也不存在取得URL参数的方法,但是已经存在插件,可以直接取得URL等参数 插件连接主页:https://github.com/allmarkedup/jQuery-URL-Parser 下载链接:http://download.github.com/allmarkedup-jQuery-URL-Parser-bb2bf37.zip Examples of use Using the current page's url (for these examples ht

js跨域问题浅析及解决方法优缺点对比_javascript技巧

什么是跨域? 概念:只要协议.域名.端口有任何一个不同,都被当作是不同的域. 复制代码 代码如下: URL                      说明       是否允许通信 http://www.a.com/a.js http://www.a.com/b.js 同一域名下 允许 http://www.a.com/lab/a.js http://www.a.com/script/b.js 同一域名下不同文件夹 允许 http://www.a.com:8000/a.js http://www

js多功能分页组件layPage使用方法详解_javascript技巧

本文的主要目的就是为大家分享layPage 多功能的js分页组件具体操作方法,供大家参考,具体内容如下 php 部分 function index(){ header('Content-Type:text/html;charset=utf-8'); // 获取当前页码,默认第一页,设置每页默认显示条数 $nowpage = I('get.page', 1, 'intval'); $limits = 8; // 获取总条数 $count = M('Article') -> where(array(

JS树形菜单组件Bootstrap TreeView使用方法详解_javascript技巧

简要介绍: 之前手头的一个项目需要去做一个左侧的树形菜单,右侧则是一个整体的iframe,从而构成一个整体的网站.一开始是打算用bootstrap的tree-view插件,直接把菜单的数据传过去就好了,结果后来项目又改了需求,菜单的内容和图表都是后台动态生成的,所以只能放弃使用bootstrap插件,自己着手写了一个树形菜单.本文主要分两部分讲,一个是对于bootstrap的treeview的实践,另一部分是介绍自己写的树形菜单. bootstrap-treeview: 组件介绍:http://

多个js与css文件的合并方法详细说明_javascript技巧

在Web项目的开发中,js,css文件会随着项目的开发变得越来越多,越来越大,这就给给性能方面带来一些问题,如,页面引入的的js,css越多的话,那么对就增加了http请求数,解决该问题的一个好的方法就是合并js,css文件. 下面就简单介绍一个方法,十分简单.下面介绍以合并js文件为例 (1) G.js文件 复制代码 代码如下: ~function(){ window.G={}; G.Method={ add:function(){ alert(111);} ,sub:function(){

Js数组的操作push,pop,shift,unshift等方法详细介绍_javascript技巧

js中针对数组操作的方法还是比较多的,今天突然想到来总结一下,也算是温故而知新吧.不过不会针对每个方法进行讲解,我只是选择其中的一些来讲. 首先来讲一下push和pop方法,这两个方法只会对数组从尾部进行压入或弹出,而且是在原数组进行操作,任何的改动都是会影响到操作的数组.push(args)可以每次压入多个元素,并返回更新后的数组长度.pop()函数每次只会弹出最后一个结尾的元素,并返回弹出的元素,如果是对空组数调用pop()则返回undefined. 如果参数是数组则是将整个数组当做一个元素