阻止事件冒泡

 在默认情况下,发生在一个子元素上的单击事件(或者其他事件),如果在其父级元素绑定了一个同样的事件,此时点击子元素,click事件会首先被子元素捕获,执行绑定的事件程序,之后会被父级元素捕获,再次激发一段脚本的执行,这就是所谓的“事件冒泡”。

例如如下代码:

<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <style type="text/css"> *{ margin:0; padding:0;} </style> </head> <body> <div id="obj1" style=" width:500px; height:500px; background:#000;"> <div id="obj2" style="width:400px; height:400px; background:red;"></div> </div> <script type="text/javascript"> var obj1 = document.getElementById('obj1'); var obj2 = document.getElementById('obj2'); obj1.onclick = function(){ alert('我点击了obj1'); } obj2.onclick = function(e){ alert('我点击了obj2'); } </script> </body> </html>

运行结果会出来两个,我点击了obj2和我点击了obj1!如何防止事件冒泡呢?在通常情况下,我们只希望事件发生在它的目标而并非它的父级元素上,只需加个stopBubble方法,即可取消事件冒泡,代码如下:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
*{ margin:0; padding:0;}
</style>
</head>
<body>
<div id="obj1" style=" width:500px; height:500px; background:#000;"><div id="obj2" style="width:400px; height:400px; background:red;"></div>
</div>
<script type="text/javascript">//阻止事件冒泡的通用函数function stopBubble(e){// 如果传入了事件对象,那么就是非ie浏览器if(e&&e.stopPropagation){//因此它支持W3C的stopPropagation()方法e.stopPropagation();}else{//否则我们使用ie的方法来取消事件冒泡window.event.cancelBubble = true;}}var obj1 = document.getElementById('obj1');var obj2 = document.getElementById('obj2');obj1.onclick = function(){alert('我点击了obj1');}obj2.onclick = function(e){alert('我点击了obj2');stopBubble(e);}
</script>
</body>
</html>

现在你可能想知道,什么时候需要阻止事件冒泡?事实上,现在绝大多数情况下都可以不必在意它。但是当你开始开发动态应用程序(尤其是需要处理键盘和鼠标)的时候,就有这个必要了。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/185399.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

建设银行新余市分行积极开展国债下乡宣传活动

近日&#xff0c;为了普及国债知识&#xff0c;提高农村居民对国债的认知度和投资意识&#xff0c;建设银行新余市分行组织员工前往下村开展了一场国债下乡宣传活动。 活动当天&#xff0c;工作人员早早地来到了下乡地点&#xff0c;悬挂起了国债宣传横幅&#xff0c;并摆放了…

ESP32-Web-Server编程- 使用SSE 实时更新设备信息

ESP32-Web-Server编程- 使用SSE 实时更新设备信息 概述 如前所述&#xff0c;传统 HTTP 通信协议基于 Request-Apply&#xff08;请求-响应&#xff09;机制&#xff0c;浏览器&#xff08;客户端&#xff09;只能单向地向服务器发起请求&#xff0c;服务器无法主动向浏览器推…

1.7 java实现License认证信息的加密解密处理

java实现License认证信息的加密解密处理 一、什么是License认证二、确定License文件的格式和内容1. 生成一个存放License信息的ini文件 三、使用RSA非对称加密方式对文件进行加密和解密1. 生成密钥对2. 加密数据3. 解密数据 一、什么是License认证 License认证是一种用于验证软…

java源码-数组

背景 上传图片&#xff0c;需要对图片格式进行校验&#xff0c;这是就可以使用数组 1、什么是数组&#xff1f; Java 语言中提供的数组是用来存储固定大小的同类型元素。 如&#xff1a;可以声明一个数组变量&#xff0c;如 numbers[100] 来代替直接声明 100 个独立变量 numb…

替代升级虚拟化 | ZStack Cloud云平台助力中节能镇江公司核心业务上云

数字经济正加速推动各行各业的高质量升级发展&#xff0c;云计算是数字经济的核心底层基础设施。作为云基础软件企业&#xff0c;云轴科技ZStack 坚持自主创新&#xff0c;自研架构&#xff0c;产品矩阵可全面覆盖数据中心云基础设施&#xff0c;针对虚拟化资源实现纳管、替代和…

用按层次顺序遍历二叉树的方法,设计算法统计树中度为1的结点数目

用按层次顺序遍历二叉树的方法&#xff0c;设计算法统计树中度为1的结点数目 代码思路&#xff1a; 层序遍历的实现需要借助一个辅助队列 首先将根结点入队&#xff0c;然后根出队&#xff0c;把根的两个子树入队 然后下面循环执行&#xff1a;队头元素出队&#xff0c;队头元…

如何通过降低设备六大损失帮助企业改善OEE

在各个行业中&#xff0c;改善设备综合效率OEE&#xff08;Overall Equipment Efficiency&#xff09;是企业实现高效生产和竞争优势的关键。然而&#xff0c;设备的六大损失常常影响着企业的OEE指标。本文将探讨如何通过降低这六大损失来帮助企业改善OEE&#xff0c;提高生产效…

2023年掌控安全学院CTF暖冬杯——数据流分析

前言&#xff1a;打工仔一枚&#xff0c;第一波上新的3题misc 做完了 再打ISCTF随便记录一下 PS&#xff1a;环境关了&#xff0c;题目描述忘记了&#xff0c;反正就是找flag。 筛选HTTP数据流 导出数据流慢慢看 ctrl F 搜flag 看到一条 有flag.txt 的数据 导出另存.zip 这里…

洗袜子的洗衣机哪款好?内衣洗衣机便宜好用的牌子

不得不说洗衣机的发明解放了我们的双手&#xff0c;而我们从小到大就有这个意识&#xff0c;贴身衣物不可以和普通的衣服一起丢进去洗衣机一起&#xff0c;而内衣裤上不仅有肉眼看见的污渍还有手上根本无法消灭的细菌&#xff0c;但是有一款专门可以将衣物上的细菌杀除的内衣洗…

java设计模式学习之【建造者模式】

文章目录 引言建造者模式简介定义与用途实现方式&#xff1a; 使用场景优势与劣势建造者模式在spring中的应用CD&#xff08;光盘&#xff09;的模拟示例UML 订单系统的模拟示例UML 代码地址 引言 建造者模式在创建复杂对象时展现出其强大的能力&#xff0c;特别是当这些对象需…

Java8特性总结

1、函数式编程 1.1 作用&#xff1a;简化、延迟执行 1.2 常用函数式编程类型 Supplier<T>:get() 生产者类型&#xff0c;返回指定T类型的数据&#xff0c;无入参Consumer<T>:accept(T) 消费者类型&#xff0c;传入T类型&#xff0c;进行消费&#xff0c;无返回值…

docker集群的详解以及超详细搭建

文章目录 一、问题引入1. 多容器位于同一主机2. 多容器位于不同主机 二、介绍三、特性四、概念1. 节点nodes2. 服务(service)和任务(task)3. 负载均衡 五、docker网络1. overlay网络 六、docker集群搭建1. 环境介绍2. 创建集群3. 集群网络4. 加入工作节点 七、部署可视化界面po…

Android 13.0 Launcher3 禁止首屏时钟部件拖动到其他屏

1.概述 在13.0的系统rom定制化开发中, 在系统Launcher3中,首页中间默认有个时钟部件来显示时间,并且可以任意拖拽到其他地方,如果拖动到其他屏显的很不美观,所以根据需要要求时钟部件 不能拖拽到其他屏,所以就要从拖拽开始处理,判断如果是时钟部件,就不让拖拽到其他屏,…

数学建模-基于脑出血患者院前指标的多种机器学习预测模型构建及比较研究

基基于脑出血患者院前指标的多种机器学习预测模型构建及比较研究 整体求解过程概述(摘要) 卒中是全球致残率、致死率最高的疾病之一&#xff0c;其中脑出血&#xff08;Intracerebral hemorrhage&#xff0c;ICH&#xff09;患者仅占卒中患者的 20%&#xff0c;但致残、死亡人…

【Linux】ln命令使用

ln命令 ln是linux中又一个非常重要命令&#xff0c;请大家一定要熟悉。它的功能是为某一个文件在另外一个位置建立一个同步的链接&#xff0c;这个命令最常用的参数是-s&#xff0c;具体用法是&#xff1a;ln –s 源文件 目标文件。 当我们需要在不同的目录&#xff0c;用到相…

CMIP6数据处理及在气候变化、水文、生态等领域中应用

气候变化对农业、生态系统、社会经济以及人类的生存与发展具有深远影响&#xff0c;是当前全球关注的核心议题之一。IPCC&#xff08;Intergovernmental Panel on Climate Change&#xff0c;政府间气候变化专门委员会&#xff09;的第六次评估报告明确&#xff1b;指出&#x…

西班牙Wallapop是什么?原来欧洲版闲鱼也很好用!

说到国内的闲鱼大家肯定不陌生&#xff0c;那国外的二手闲置平台大家知道吗&#xff1f;在西班牙&#xff0c;最受欢迎的移动购物APP是Wallapop和速卖通。Wallapop是西班牙第一大二手商品网站&#xff0c;网站上丰富的性价比高的商品正好满足了西班牙人的需求。今天龙哥就和大家…

git 无法可克隆分支 时候使用tortoisegit

0、环境 windows10 64位 1、Git下载和安装 Git官网&#xff1a;Git - Downloading Package (git-scm.com) Git官网&#xff1a;Git - Downloading Package (git-scm.com) https://tortoisegit.org/download/

Yolov8实现瓶盖正反面检测

一、模型介绍 模型基于 yolov8n数据集采用SKU-110k&#xff0c;这数据集太大了十几个 G&#xff0c;所以只训练了 10 轮左右就拿来微调了 基于原木数据微调&#xff1a;训练 200 轮的效果 10 轮SKU-110k 20 轮原木 200 轮瓶盖正反面 微调模型下载地址https://wwxd.lanzouu.co…

网站提示不安全?

随着互联网的普及和发展&#xff0c;网络安全问题日益严重。黑客攻击、数据泄露、恶意软件等问题层出不穷&#xff0c;给企业和个人带来了巨大的损失。在这个背景下&#xff0c;确保网站安全显得尤为重要&#xff0c;而使用SSL证书是解决这些问题的有效措施。 什么是SSL证书&am…