jq监听子元素被点击_html 子元素和父元素都监听了 click 事件，点击子元素时为何先触发的是父元素的 click 事件？...

先上一段代码，点击子元素时先触发的是父元素的 click 事件

function onLoads(){

document.getElementById("div1").addEventListener("click",(e) => {

alert('1');

}, true);

document.getElementById("div2").addEventListener("click",(e) => {

alert('2');

}, true);

}

点击蓝色代码时会先弹出 1，然后弹出2; 说明先父元素事件先触发，然后是子元素事件触发

看了文档后瞬间明朗了：

语法

element.addEventListener(event, function, useCapture)

参数值

参数

描述

event

必须。字符串，指定事件名。

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

提示： 所有 HTML DOM 事件，可以查看我们完整的 HTML DOM Event 对象参考手册。

function

必须。指定要事件触发时执行的函数。

当事件对象会作为第一个参数传入函数。 事件对象的类型取决于特定的事件。例如， "click" 事件属于 MouseEvent(鼠标事件) 对象。

useCapture

可选。布尔值，指定事件是否在捕获或冒泡阶段执行。

可能值:

true - 事件句柄在捕获阶段执行

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

addEventListener 主要在第三个参数上面，

冒泡阶段：这类似与池塘里的涟漪，从事件中心点，向上层传播。而事件捕获和这个顺序正好相反。

所以，如果想要点击事件从 子元素->父元素 这样的顺序传递的话，改下参数即可

function onLoads(){

document.getElementById("div1").addEventListener("click",(e) => {

alert('1');

}, false);

document.getElementById("div2").addEventListener("click",(e) => {

alert('2');

}, false);

}

如果，点击了子元素，不想点击事件向上冒泡的话，可以这样处理

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);

}

或者

function onLoads(){

document.getElementById("div1").addEventListener("click",(e) => {

alert('1');

e.stopPropagation();

}, false);

document.getElementById("div2").addEventListener("click",(e) => {

alert('2');

e.stopPropagation();

}, false);

}

【转】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触发添加页面的元素的事件触发不了。。

有下代码可知:

layui监听复选按钮点击

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

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

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

随机推荐

冒泡排序和用for循环画菱形

忘了当时刚开始学java编程时提到的冒泡排序和for循环画菱形怎么做了, 找了找以前的练习, 重新修改了一遍, 其实冒泡排序也是可以排列字符串和字符的, package com.test; publi ...

【BZOJ-4636】蒟蒻的数列 动态开点线段树 ||(离散化) + 标记永久化

4636: 蒟蒻的数列 Time Limit: 30 Sec  Memory Limit: 256 MBSubmit: 247  Solved: 113[Submit][Status][Discuss ...

WCF 删除队列

Configuration config = ConfigurationManager.OpenExeConfiguration (ConfigurationUserLevel.None); Serv ...

JAXB注解【转】

http://blog.csdn.net/lw371496536/article/details/6942045 JAXB(Java API for XML Binding),提供了一个快速便捷的方式 ...

poj-3040 Allowance (贪心)

http://poj.org/problem?id=3040 FJ 有n种不同面值的硬币,每种硬币都有相应的个数,大面值的硬币值总能被小面值的硬币值整除,每周需要支付 Bessie   c元,问最多能 ...

Boostrap 模态框 水平垂直居中问题

var editorB = new UE.ui.Editor({ initialFrameHeight: 350, initialFrameWidth: 600 });         ...

微信小程序 JS 获取View 和 屏幕相关属性(高度、宽度等等)

wx.getSystemInfo({success: function (res) {thisWidth = res.windowWidth;}}); that.setData({view_Width ...

由于未能创建Visual C# 2015编译器，因此未能打开项目xxx。请重新安装Visual Studio。

解决方案1: 清除如下文件夹里的内容. %AppData%\Local\microsoft\VisualStudio\14.0\ComponentModelCache or  C:\Users\DEL ...

【Python】exe2shellcode，shellcode2exe

用python写这类程序真简洁,要是用C++又不知道得多写多少行代码了. exe2shellcode #! /usr/bin/env python # -*- coding: utf-8 -*- im ...

spring学习之@SessionAttributes

一.@ModelAttribute 在默认情况下,ModelMap 中的属性作用域是 request 级别是,也就是说,当本次请求结束后,ModelMap 中的属性将销毁.如果希望在多个请求中共享 M ...