html 子元素和父元素都监听了 click 事件，点击子元素时为何先触发的是父元素的 click 事件？
先上一段代码，点击子元素时先触发的是父元素的 click 事件
<html>
<head>
<script type="text/javascript">
function onLoads(){
document.getElementById("div1").addEventListener("click",(e) => {
alert('1');
}, true); document.getElementById("div2").addEventListener("click",(e) => {
alert('2');
}, true);
}
</script>
</head>
<body onload="onLoads()">
<div id="div1" style="width:400px;height:400px;background-color:red;border:1px;float:left; z-index:1;" >
<div id="div2" style="width:50px;height:50px;background-color:blue;float:left; z-index:2;" ></div>
</div>
</body>
</html>
点击蓝色代码时会先弹出 1，然后弹出2; 说明先父元素事件先触发，然后是子元素事件触发
看了文档后瞬间明朗了：
语法
参数值
| 参数 | 描述 |
|---|---|
| event | 必须。字符串，指定事件名。
注意: 不要使用 "on" 前缀。 例如，使用 "click" ,而不是使用 "onclick"。 提示： 所有 HTML DOM 事件，可以查看我们完整的 HTML DOM Event 对象参考手册。 |
| function | 必须。指定要事件触发时执行的函数。
当事件对象会作为第一个参数传入函数。 事件对象的类型取决于特定的事件。例如， "click" 事件属于 MouseEvent(鼠标事件) 对象。 |
| useCapture | 可选。布尔值，指定事件是否在捕获或冒泡阶段执行。
可能值:
|
addEventListener 主要在第三个参数上面，
冒泡阶段：这类似与池塘里的涟漪，从事件中心点，向上层传播。而事件捕获和这个顺序正好相反。
所以，如果想要点击事件从 子元素->父元素 这样的顺序传递的话，改下参数即可
<script type="text/javascript">
function onLoads(){
document.getElementById("div1").addEventListener("click",(e) => {
alert('1');
}, false); document.getElementById("div2").addEventListener("click",(e) => {
alert('2');
}, false);
}
</script>
如果，点击了子元素，不想点击事件向上冒泡的话，可以这样处理
<script type="text/javascript">
function onLoads(){
document.getElementById("div1").addEventListener("click",(e) => {
alert('1');
e.cancelBubble = true;
}, false); document.getElementById("div2").addEventListener("click",(e) => {
alert('2');
e.cancelBubble = true;
}, false);
}
</script>
或者
<script type="text/javascript">
function onLoads(){
document.getElementById("div1").addEventListener("click",(e) => {
alert('1');
e.stopPropagation();
}, false); document.getElementById("div2").addEventListener("click",(e) => {
alert('2');
e.stopPropagation();
}, false);
}
</script>
html 子元素和父元素都监听了 click 事件，点击子元素时为何先触发的是父元素的 click 事件？的更多相关文章
- 【转】Android开发20——单个监听器监听多个按钮点击事件
原文网址:http://woshixy.blog.51cto.com/5637578/1093936 原创作品,允许转载,转载时请务必以超链接形式标明文章 原始出处 .作者信息和本声明.否则将追究法律 ...
- vue中父组件如何监听子组件值的变化
vue中我们会遇到很多父子组件通信的需求, 下面简单列一下,父子组件通信的几种情况 1:父组件向子组件传值:使用prop向子组件传值: 2:子组件实时监听父组件传来的值的变化:使用watch去监听父组 ...
- ionic 监听页面滚动，点击停止滚动
类似今日头条,页面上有很多card,点击每个card跳转该card的详情页面.这里有一个问题,当我滚动页面时,会先后触发touchstart.touchmove.touchend,但是当touchen ...
- java代码对按钮进行监听---------------打印出每次点击按钮的次数
其实,我真不会写嗯? package com.a.b; import java.awt.event.ActionEvent; import java.awt.event.ActionListener; ...
- Android事件监听（二）——点击鼠标事件
Button.ImageButton事件监听(setOnClickListener) 方法一:通过匿名内部类实现 代码如下: package com.note.demo2; import androi ...
- 当页面加载完成时，JQ触发添加页面的元素的事件触发不了。。
有下代码可知: <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default. ...
- onItemClickListener监听的整个item的点击。如何只监听那个framelayout的点击 onItemClickListener监听的整个item的点击。如何只监听那个framelayout的点击
已经知道了.复写getView()的时候,在内部Viewholder.length.setOnClickListener(匿名内部类) 然后新建一个接口方进去 ,然后外面的listView设置&l ...
- layui监听复选按钮点击
layui.form.on('checkbox(resultQuery)', function(data){ console.log(data.elem); //得到checkbox原始DOM对象 c ...
- 父组件向子组件传值时，值已经传过来却没有触发子组件的watch监听，解决~
需求: 父组件像封装的子组件传值 (父组件属性传值,子组件props接受) 子组件接受后经过处理回显页面; 预想:子组件接受值 , 经过watch监听,在监听中处理数据,回显数据; 问题:子组件 ...
随机推荐
- CentOS搭建“加速器”
1.安装Shadowsocks 服务端 yum -y update yum install -y python-setuptools && easy_install pip pip i ...
- POJ 3264 RMQ水题
题目大意就是有很多牛.告诉你每只牛的高度.然后有很多个询问.输出该区间内的最大身高差.也就是用RMQ求最大值最小值.貌似还可以用线段树.然而,我还不会线段树.....T_T 可能是太多组数据了.cin ...
- James Whittaker：经营成功的测试职业生涯
转注:这篇文章出自 James A. Whittaker,Google的工程总监,负责Google部分产品的测试,包括Chrome.地图.GoogleWebApp.在加盟Google之前,James在 ...
- cf935E
题解: 树形dp 要记录一个最小的,一个最大的 然后转移 代码: #include<bits/stdc++.h> using namespace std; ; ][],f[N*][],T[ ...
- 树状数组Lowbit用法
刚学树状数组,看到这里的时候懵了.经过询问,发现,原来在程序运行时,数据用的都是补码,于是解决了 int Lowbit(x) { return x&(-x); } 如: x =1: 1 &am ...
- PHP parse_url 一个好用的函数
array parse_url ( string $url ) 本函数解析一个 URL 并返回一个关联数组,包含在 URL 中出现的各种组成部分. 对严重不合格的 URL,parse_url() 可能 ...
- 关于反射的BindingFlag浅析
MSDN关于BindingFlag的文档地址:https://msdn.microsoft.com/zh-cn/library/cexkb29a BindFlags作为一个特别的标志量,在反射中通过这 ...
- hpu 1267 Cafeteria (01背包)
1267: Cafeteria [DP] 时间限制: 1 Sec 内存限制: 128 MB提交: 76 解决: 31 统计 题目描述 Nanae把饥肠辘辘的josnch带去一家自助餐厅,面对面前眼花缭 ...
- <NET CLR via c# 第4版>笔记 第12章 泛型
泛型优势: 源代码保护 使用泛型算法的开发人员不需要访问算法的源代码.(使用c++模板的泛型技术,算法的源代码必须提供给使用算法的用户) 类型安全 向List<DateTime>实例添加一 ...
- 201621123010《Java程序设计》第10周学习总结
1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结异常相关内容. 2. 书面作业 本次PTA作业题集异常 1. 常用异常 结合题集题目7-1回答 1.1 自己以前编写的代码中经常出现 ...