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上关注我,一起入门和进阶前端. 以下是正文. 绑定事件的两种方式 我们在上一篇文章中已经讲过事件的概念.这里讲一下注册 ...
随机推荐
- CRM 数据查重
2.8 小工具 · 纷享销客产品手册https://www.fxiaoke.com/mob/guide/crmdoc/src/2-8%E5%B0%8F%E5%B7%A5%E5%85%B7.html C ...
- 如何删除GitHub或者GitLab 上的文件夹
如何删除GitHub或者GitLab 上的文件夹 需求分析 假设小明有一天不小心把本地仓库的一个文件夹A推送到了远程GIT服务器(例如:github,gitlab,gitee)上,此时想删除远程仓 ...
- C++拷贝控制
一.拷贝控制操作 当定义一个类时,显示或隐式地指定了此类型的对象在拷贝.赋值和销毁时所执行的操作,通过三个特殊的成员函数来控制这些操作,分别是拷贝构造函数,赋值运算符和析构函数.拷贝构造函数定义了 ...
- Oracle 的ORION工具简单使用
1. 下载地址: http://www.oracle.com/technetwork/cn/topics/index-088165-zhs.html 2. linux x64 还有 windows的 ...
- 小程序的wx.onAccelerometerChange
https://www.2cto.com/kf/201802/724174.html(copy) 也许有人会问,小程序中都是竖直app形态,要横竖屏判断有什么用?即使判断出了横屏状态,你能把小程序横过 ...
- ubuntu安装命令
sudo apt-get update 更新源sudo apt-get install package 安装包sudo apt-get remove package 删除包sudo apt-cach ...
- pandas聚合aggregate
#!/usr/bin/env python # -*- coding: utf-8 -*- # @Time : 2018/5/24 15:03 # @Author : zhang chao # @Fi ...
- VS2017+WIN10自动生成类、接口的说明(修改类模板的方法)
微软发布VS2017的时候,我第一时间离线一份专业版,安装到了自己的电脑上,开始体验,但是问题来了,在开发中建立类和接口的时候,说 明注释总要自己写一次,烦!~~于是还是像以前一样改IDE默认的类和接 ...
- JavaScript & Dom 之 基本语法
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- ssm 整合 redis(进阶教程)
最后我建议大家使用 Spring StringRedisTemplate 配置,参阅: http://blog.csdn.net/hanjun0612/article/details/78131333 ...