javascript 事件冒泡与取消冒泡
事件冒泡:
当一个元素上的事件被触发时,比如说鼠标点击了一个按钮,同样的事件将会在那个元素的所有祖先中被触发,这一过程被称为事件冒泡。
这个事件从原始祖先开始,一直冒泡到DOM树的最上层。(bug)
(本来应该一人做事一人当,结果我做错了事,你却去告诉了我妈)
简单来说,冒泡就是:子元素事件被触动,父盒子的同样事件也会被触动。
取消冒泡就是取消这种机制。
阻止冒泡:
火狐、谷歌、IE11:event.stopPropagation();
IE10以下:event.cancelBubble = true;
兼容代码:
a.onclick = function (event) {
//阻止冒泡
event = event || window.event;
if(event && event.stopPropagation){
event.stopPropagation();
}else{
event.cancelBubble = true;
}}
javascript 事件冒泡与取消冒泡的更多相关文章
- JavaScript事件:事件处理模型(冒泡、捕获)、取消冒泡、阻止默认事件
(一)事件处理模型---事件冒泡.捕获 (1)事件冒泡 24 <body> 25 <div class="warpper"> 26 <div clas ...
- 第一百二十节,JavaScript事件对象
JavaScript事件对象 学习要点: 1.事件对象 2.鼠标事件 3.键盘事件 4.W3C与IE JavaScript事件的一个重要方面是它们拥有一些相对一致的特点,可以给你的开发提供更多的强大功 ...
- javascript的自定义对象/取消事件/事件兼容性/取消冒泡
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- 解析Javascript事件冒泡机制
本资源引自: 解析Javascript事件冒泡机制 - 我的程序人生 - 博客频道 - CSDN.NET http://blog.csdn.net/luanlouis/article/details/ ...
- JavaScript事件——冒泡、捕获
本节要点:1.干预系统的事件处理机制 (一)DOM事件流 (二)停止事件冒泡 (三)阻止事件的默认行为 1.干预系统的事件处理机制 (一)DOM事件流 DOM模型是一个树形结构,在DOM模型中,HTM ...
- Javascript事件冒泡机制
1. 事件 在浏览器客户端应用平台,基本生都是以事件驱动的,即某个事件发生,然后做出相应的动作. 浏览器的事件表示的是某些事情发生的信号.事件的阐述不是本文的重点,尚未了解的朋友,可以访问W3scho ...
- javascript事件捕获与冒泡
对“捕获”和“冒泡”这两个概念,我想我们对冒泡更熟悉一些,因为在我们使用的所有浏览器中,都支持事件冒泡,即事件由子元素向祖先元素传播的,就 像气泡从水底向水面上浮一样.而在像firefox,chrom ...
- javascript事件冒泡
1. 事件 在浏览器客户端应用平台,基本生都是以事件驱动的,即某个事件发生,然后做出相应的动作. 浏览器的事件表示的是某些事情发生的信号.事件的阐述不是本文的重点,尚未了解的朋友,可以访问W3scho ...
- JavaScript:事件对象Event和冒泡
本文最初发表于博客园,并在GitHub上持续更新前端的系列文章.欢迎在GitHub上关注我,一起入门和进阶前端. 以下是正文. 绑定事件的两种方式 我们在上一篇文章中已经讲过事件的概念.这里讲一下注册 ...
随机推荐
- 『编程题全队』Beta 阶段冲刺博客三
1.提供当天站立式会议照片一张 2.每个人的工作 (有work item 的ID) (1) 昨天已完成的工作 孙志威: 1.添加登录框的功能 2.修改登录框的UI 孙慧君: 1.提醒显示UI设计: 2 ...
- Axios插件和loading的实现
axios插件就是一个ajax插件 axios具有ajax的所有方法如 get post delete put等等的方法 使用时只需要引入即可 如import Axios form 'axios' 不 ...
- Linux 忘记root密码
1 将系统重启,读秒的时候按下任意键就会出现如下图菜单界面 2 进入上图菜单界面之后,按e键就可以进入grub的编辑模式 3 选择第二行 kernel开头,再按 e 键进入该行的编辑界面中,然后在出现 ...
- Angular 行内式依赖注入
var app = angular.module('myApp', ['ng']); //创建一个自定义服务app.factory('$Debug', function () { return { d ...
- CSS 范围选择器(自编)
选择第一个到第六个li元素ul li:nth-child(n+3):not(:nth-child(n+6)){} 选择第二个到最后一个ul li:nth-child(2)~li{} 选择除了第一个和最 ...
- Angular $cookieStore简单应用
angular.module('cookieStoreExample', ['ngCookies']) .controller('ExampleController', ['$cookieStore' ...
- 解决主机ping不通虚拟机
vmware 08网卡 解决的办法就是 从vmware中,选择菜单:edit->virtual network editor,选择nat,点击左下角的”restore Default“,然后就正 ...
- centos7 修改网络配置问题
ip adr 查看ip 查看报错详细信息 journalctl -xe 查看网络故障命令 cat /var/log/messages |grep network 报错现象 Error: Connect ...
- CF1045G
CF1045G 看了下题解,动态开点线段树,好像挺难的 #include <map> #include <cstdio> #include <algorithm> ...
- TCP的三次握手与四次挥手过程,各个状态名称与含义
三次握手 第一次握手:主机A发送位码为syn=1,随机产生seq number=10001的数据包到服务器,主机B由SYN=1知道,A要求建立联机,此时状态为SYN_SENT: 第二次握手:主机B收到 ...