Js冒泡事件详解及阻止
Js冒泡机制是指如果某元素定义了事件A，如click事件，如果触发了事件之后，没有阻止冒泡事件，那么事件将向父级元素传播，触发父类的click函数。
如下例所示：
<html>
<script type="text/javascript" src="jquery-1.7.1.js"></script>
<script>
function ialertdouble(e) {
alert('innerdouble');
stopBubble(e);
}
function ialertthree(e) {
alert('innerthree');
stopBubbleDouble(e);
}
function stopBubble(e) {
var evt = e||window.event;
evt.stopPropagation?evt.stopPropagation():(evt.cancelBubble=true);//阻止冒泡
}
function stopBubbleDouble(e) {
var evt = e||window.event;
evt.stopPropagation?evt.stopPropagation():(evt.cancelBubble=true);//阻止冒泡
evt.preventDefault();//阻止浏览器默认行为，这样链接就不会跳转
}
$(function() {
//方法一
//$('#jquerytest').click(function(event) {
// alert('innerfour');
// event.stopPropagation();
// event.preventDefault();
//});
//方法二
$('#jquerytest').click(function() {
alert('innerfour');
return false;
});
});
</script>
<div onclick="alert('without');">without
<div onclick="alert('middle');">middle
<div onclick="alert('inner');">inner</div>
<div onclick="ialertdouble(event)">innerdouble</div>
<p><a href='http://www.baidu.com' onclick="ialertthree(event)">innerthree</a></p>
<p id='jquerytest'><a href='http://www.baidu.com'>innerfour</a></p>
</div>
</div>
</html>
当你点击inner的时候，会依次弹出‘inner’，‘middle’和‘without’。这就是事件冒泡。
从直观上来看，也是这样的，因为最里层的区域是在父级节点中的，点击了子级节点的区域，其实也是点击了父级节点的区域，所以事件会传播起来。
其实，很多的时候，我们并不想事件冒泡，因为这样会同时触发几个事件。
接下来：我们点击innerdouble。就会发现她并没有冒泡，因为她在调用的方法ialertdouble()中调用了stopBubble()方法，方法通过判断浏览器类型（Ie通过cancleBubble() 、firefox通过stopProgation()）来阻止冒泡。
但如果是链接的话，我们会发现她也会阻止冒泡，但是会跳转，这就是浏览器的默认行为。需要借助preventDefault()方法来阻止。具体可以查看ialertthree()。
目前主流的都是借助jquery来绑定click事件的，这样的话，就简单多了。
我们可以在点击事件时传入参数event，然后直接
event.stopPropagation();
event.preventDefault(); //没有链接不需要加这个。
这样就可以了。
框架就是好，其实还有更简单的，在事件处理程序中返回false，这是对在事件对象上同时调用stopPropagation()和preventDefault()的一种简写方式。
【详细代码见上面，记得载入jquery.js。】
其实也还可以在每个click事件中加入判断：
$('#id').click(function(event){
if(event.target==this){
//do something
}
})
解析：事件处理程序中的变量event保存着事件对象。而event.target属性保存着发生事件的目标元素。这个属性是DOM API中规定的，但是没有被所有浏览器实现 。jQuery对这个事件对象进行了必要的扩展，从而在任何浏览器中都能够使用这个属性。通过.target，可以确定DOM中首先接收到事件的元素（即实际被单击的元素）。而且，我们知道this引用的是处理事件的DOM元素，所以可以编写以上代码。
不过推荐使用return false，Jquery绑定事件的话。
Js冒泡事件详解及阻止的更多相关文章
- javascript冒泡事件详解
冒泡事件: 定义:当多个Dom元素互相嵌套的时候,一个元素触发了某个事件(例如Click事件),那么嵌套此事件的所有元素都会被触发一次Click事件,注意:只会触发他的直系亲属元素,而与其自己,父级, ...
- javascript - 事件详解（阻止事件冒泡+阻止事件行为）
一.事件流 1.事件流 描述的是在页面中接受事件的顺序 2.事件冒泡 由最具体的元素接收,然后逐级向上传播至最不具体的元素的节点 (最具体 –> 最不具体) 3.事件捕获 最不具体的节点先接收事 ...
- react第五单元(事件系统-原生事件-react中的合成事件-详解事件的冒泡和捕获机制)
第五单元(事件系统-原生事件-react中的合成事件-详解事件的冒泡和捕获机制) 课程目标 深入理解和掌握事件的冒泡及捕获机制 理解react中的合成事件的本质 在react组件中合理的使用原生事件 ...
- Js 冒泡事件阻止
Js 冒泡事件阻止 1. 事件目标 现在,事件处理程序中的变量event保存着事件对象.而event.target属性保存着发生事件的目标元素.这个属性是DOM API中规定的,但是没有被所有浏览 ...
- 第三天：JS事件详解-事件流
学习来源: F:\新建文件夹 (2)\HTML5开发\HTML5开发\04.JavaScript基础\6.JavaScript事件详解 学习内容: 1)基础概念 2)举例说明: 代码如上,如果用事件 ...
- js中鼠标滚轮事件详解
js中鼠标滚轮事件详解 (以下内容部分内容参考了http://adomas.org/javascript-mouse-wheel/ ) 之前js 仿Photoshop鼠标滚轮控制输入框取值中已使用 ...
- js keyup、keypress和keydown事件 详解
js keyup.keypress和keydown事件 详解 js keyup.keypress和keydown事件都是有关于键盘的事件 当一个按键被pressed 或released在每一个现代浏 ...
- Atitit. Js 冒泡事件阻止 事件捕获 事件传递 事件代理
Atitit. Js 冒泡事件阻止 事件捕获 事件传递 事件代理 1. 事件冒泡1 2. 事件捕获1 3. 同时支持了事件捕获阶段和事件冒泡阶段ddEventListener的第三个参数1 ...
- JavaScript事件详解-jQuery的事件实现（三）
正文 本文所涉及到的jQuery版本是3.1.1,可以在压缩包中找到event模块.该篇算是阅读笔记,jQuery代码太长.... Dean Edward的addEvent.js 相对于zepto的e ...
随机推荐
- Windows下基于http的git服务器搭建-gitstack
版权声明:若无来源注明,Techie亮博客文章均为原创. 转载请以链接形式标明本文标题和地址: 本文标题:Windows下基于http的git服务器搭建-gitstack 本文地址:http: ...
- 【第二周】Java实现英语文章词频统计
1.需求:对于给定的英文文章进行单词频率的统计 2.分析: (1)建立一个如下图所示的数据库表word_frequency用来存放单词和其对应数量 (2)Scanner输入要查询的英文文章存入Stri ...
- android android.mk中:= ?= +=之间的区别
转自:http://blog.csdn.net/love_xsq/article/details/50395138 在Makefile中我们经常看到 = := ?= +=这几个赋值运算符,那么他们有什 ...
- HTTP协议 结构，get post 区别(阿里面试)
如果需要想了解相关的TCP的协议结构,底层架构,以及每次面试必问的三次握手,四次挥手可以 参考:TCP协议详解7层和4层解析(美团面试,阿里面试) 尤其是三次握手,四次挥手 具体发送的报文和状态都要掌 ...
- 第120天：移动端-Bootstrap基本使用方法
一.Bootstrap使用 1.搭建Bootstrap页面骨架及项目目录结构 ``` ├─ /weijinsuo/ ··················· 项目所在目录 └─┬─ /css/ ···· ...
- EF中Json序列化对象时检测到循环引用的解决办法
MVC4 EF中将数据表外键引用的是自身,转换成Json时,总是提示错误:“序列化类型为....的对象时检测到循环引用.”: 解决办法: 把要序列化的对象转为匿名对象去掉导航属性,如下 :本来是var ...
- ZOJ3113_John
这个题目是一个典型的Anti_Sg.我也不知道为什么这么叫,呵呵,反正大家都这么叫,而且我也是听别人说,看别人的日志自己才知道的. 题目的意思是给你不同颜色的石子,每次可以去一种颜色的石子若干个(至少 ...
- Django 2.0 学习(16)：Django ORM 数据库操作(下)
Django ORM数据库操作(下) 一.增加表记录 对于表单有两种方式: # 方式一:实例化对象就是一条表记录france_obj = models.Student(name="海地&qu ...
- 【JavaScript&jQuery】省市区三级联动
HTML: <%@page import="com.mysql.jdbc.Connection"%> <%@ page language="java&q ...
- Django安装及简介
一. Django简介 Python下有许多款不同的 Web 框架.Django是重量级选手中最有代表性的一位.许多成功的网站和APP都基于Django. Django是一个开放源代码的Web应用框架 ...