先上一段代码，点击子元素时先触发的是父元素的 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; 说明先父元素事件先触发，然后是子元素事件触发

看了文档后瞬间明朗了：

语法

element.addEventListener(event, function, useCapture)

参数值

参数 描述
event 必须。字符串，指定事件名。

注意: 不要使用 "on" 前缀。 例如，使用 "click" ,而不是使用 "onclick"。

提示： 所有 HTML DOM 事件，可以查看我们完整的 HTML DOM Event 对象参考手册。
function 必须。指定要事件触发时执行的函数。

当事件对象会作为第一个参数传入函数。 事件对象的类型取决于特定的事件。例如， "click" 事件属于 MouseEvent(鼠标事件) 对象。
useCapture 可选。布尔值，指定事件是否在捕获或冒泡阶段执行。

可能值:

  • true - 事件句柄在捕获阶段执行
  • false- false- 默认。事件句柄在冒泡阶段执行

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 事件？的更多相关文章

  1. 【转】Android开发20——单个监听器监听多个按钮点击事件

    原文网址:http://woshixy.blog.51cto.com/5637578/1093936 原创作品,允许转载,转载时请务必以超链接形式标明文章 原始出处 .作者信息和本声明.否则将追究法律 ...

  2. vue中父组件如何监听子组件值的变化

    vue中我们会遇到很多父子组件通信的需求, 下面简单列一下,父子组件通信的几种情况 1:父组件向子组件传值:使用prop向子组件传值: 2:子组件实时监听父组件传来的值的变化:使用watch去监听父组 ...

  3. ionic 监听页面滚动，点击停止滚动

    类似今日头条,页面上有很多card,点击每个card跳转该card的详情页面.这里有一个问题,当我滚动页面时,会先后触发touchstart.touchmove.touchend,但是当touchen ...

  4. java代码对按钮进行监听---------------打印出每次点击按钮的次数

    其实,我真不会写嗯? package com.a.b; import java.awt.event.ActionEvent; import java.awt.event.ActionListener; ...

  5. Android事件监听（二）——点击鼠标事件

    Button.ImageButton事件监听(setOnClickListener) 方法一:通过匿名内部类实现 代码如下: package com.note.demo2; import androi ...

  6. 当页面加载完成时，JQ触发添加页面的元素的事件触发不了。。

    有下代码可知: <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default. ...

  7. onItemClickListener监听的整个item的点击。如何只监听那个framelayout的点击 onItemClickListener监听的整个item的点击。如何只监听那个framelayout的点击

    已经知道了.复写getView()的时候,在内部Viewholder.length.setOnClickListener(匿名内部类)   然后新建一个接口方进去 ,然后外面的listView设置&l ...

  8. layui监听复选按钮点击

    layui.form.on('checkbox(resultQuery)', function(data){ console.log(data.elem); //得到checkbox原始DOM对象 c ...

  9. 父组件向子组件传值时，值已经传过来却没有触发子组件的watch监听，解决~

    需求: 父组件像封装的子组件传值  (父组件属性传值,子组件props接受)   子组件接受后经过处理回显页面; 预想:子组件接受值 , 经过watch监听,在监听中处理数据,回显数据; 问题:子组件 ...

随机推荐

  1. memory prefix twi,tri,trans ,tetra out 4

    1● twi 二   2● tri 三   3● trans 超过,超载   4● tetra 立体  

  2. PHP:第二章——PHP中的equire与incude语句

    <?php header("Content-Type:text/html;charset=utf-8"); /* include: include_once//include ...

  3. learning docker steps(2) ----- docker contailner 初次体验

    参考:https://docs.docker-cn.com/get-started/part2/ Dockerfile的内容如下所示: # 将官方 Python 运行时用作父镜像 FROM pytho ...

  4. SQL Server 调优系列玩转篇二（如何利用汇聚联合提示（Hint）引导语句运行）

    前言 上一篇我们分析了查询Hint的用法,作为调优系列的最后一个玩转模块的第一篇.有兴趣的可以点击查看:SQL Server调优系列玩转篇(如何利用查询提示(Hint)引导语句运行) 本篇继续玩转模块 ...

  5. superset 安装配置

    一.配置python虚拟环境,请参考 superset依赖python3.6环境 https://www.cnblogs.com/xibuhaohao/p/9994854.html 二.安装配置sup ...

  6. bootstrap的学习总结

    1.bootstrap是一个css框架,它提供了很多类,这些类中实现了内外边距,颜色,大小等样式的封装,它还提供了很多常用插件可以直接使用 2.12栅格本质上是将标签的外边距和内边距通过“格子”的思想 ...

  7. Pycharm出现的部分快捷键无效问题及解决办法

    为了进行python开发,下载了Pycharm.但是发现启动后,执行ctrl+c和ctrl+v等快捷键都无法生效. 网上搜索了下,参考https://blog.csdn.net/c2366994582 ...

  8. shell 脚本实战笔记(8)--ssh免密码输入执行命令

    前言: ssh命令, 没有指定密码的参数. 以至于在脚本中使用ssh命令的时候, 必须手动输入密码, 才能继续执行. 这样使得脚本的自动化执行变得很差, 尤其当ssh对应的机器数很多的时候, 会令人抓 ...

  9. 使用Nginx实现灰度发

     灰度发布是指在黑与白之间,能够平滑过渡的一种发布方式.AB test就是一种灰度发布方式,让一部分用户继续用A,一部分用户开始用B,如果用户对B没有什么反对意见,那么逐步扩大范围,把所有用户都迁移到 ...

  10. jenkins构建配置

    # Poll SCM:定时检查源码变更(根据SCM软件的版本号),如果有更新就checkout最新code下来,然后执行构建动作 # 每5分钟检查一次源码变化 # Build periodically ...