开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

如何通过单击父元素来检测子元素？

通过单击父元素来检测子元素可以使用事件委托的方式。事件委托是将事件处理程序绑定到父元素上，然后利用事件冒泡的机制，在父元素上捕获子元素的事件。这种方式可以减少事件处理程序的数量，提高性能，并且可以动态地处理新增的子元素。

具体实现步骤如下：

获取父元素和子元素的引用。
给父元素绑定点击事件的事件处理程序。
在事件处理程序中，通过事件对象的target属性获取触发事件的元素。
判断触发事件的元素是否是子元素，可以通过比较元素的引用或者元素的class、id等属性进行判断。
如果是子元素，则执行相应的操作。

以下是一个示例代码：

<!DOCTYPE html>
<html>
<head>
  <title>事件委托示例</title>
</head>
<body>
  <div id="parent">
    <button>按钮1</button>
    <button>按钮2</button>
    <button>按钮3</button>
  </div>

  <script>
    var parent = document.getElementById('parent');

    parent.addEventListener('click', function(event) {
      var target = event.target;
      if (target.tagName === 'BUTTON') {
        // 子元素被点击
        console.log('子元素被点击');
        // 执行相应的操作
      }
    });
  </script>
</body>
</html>

在上述示例中，通过给父元素绑定点击事件的事件处理程序，当点击父元素中的按钮时，会在控制台输出"子元素被点击"。你可以在事件处理程序中执行相应的操作，例如修改子元素的样式、获取子元素的数据等。

推荐的腾讯云相关产品：腾讯云云服务器（CVM），产品介绍链接地址：https://cloud.tencent.com/product/cvm

相关搜索:如何通过包含具有特定src属性img子元素来选择父元素通过单击父组件，单击子组件通过单击导航到元素来关闭Bootstrap模式如何根据元素本身而不是父元素来缩放元素？如何在单击子元素时停止父元素上的单击事件单击父元素时JS函数，单击子元素时返回false 如何检查父元素中的单击,但不检查子元素中的单击？单击父级时获取子元素的id JS/JQuery:检测子元素何时添加到父元素即使单击子元素，也将焦点放在父元素中单击sunburst图表中的子元素，深入到父元素嵌套v-用于从单击子元素访问父元素单击父元素而不是子元素时是否运行函数？React.js在父元素单击时修改子元素如何用子元素触发父元素？如何使子元素覆盖父元素？如何通过单击select2元素获得输出？Angular:如何在单击子元素时将类添加到父元素如何通过单击父脚本上的按钮执行子python脚本？如何通过在字典中匹配关键元素来获取关键元素？

相关搜索:

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

CSS中常见的BUG调试

拥有布局的元素负责自身及其子元素的尺寸及定位，而没有布局的元素仅仅能依靠近期的祖先元素进行控制。

01

【Android笔记】Jetpack Compose

注意，Jetpack Compose中的控件被定义成一个一个的可组合函数，官方称这些控件为Composable，翻译成中文是“可组合项”，当强调它作为一个界面的一部分出现时，我会使用“控件”或“元素”之类的术语，要注意这三者之间的差别，我不知道有没有更好的词，所以我只能用这两个。当仅仅强调它是一个可组合项时，我会正常使用“可组合项”这个术语。 Layout系统

02

事件委托和this

事件的第一个阶段是捕获阶段。事件从文档的根节点流向目标对象节点。途中经过各个层次的DOM节点，并在各节点上触发捕获事件，直到到达事件的目标节点。捕获阶段的主要任务是建立传播路径，在冒泡阶段，事件会通过这个路径回溯到文档跟节点。

03

BubbleRob tutorial 遇到的问题

对于v-rep的学习来说，国内的中文资料相对来说比较少，就VREP User Manual又是全英文的教程，读起来其比较麻烦。我个人比较推荐的还是对软件进行实际操作，在操作的过程中，我们会遇到许多问题，在解决问题的过程中，我们会对软件更加熟悉！

01

jQuery事件代理

事件代理就是利用事件冒泡的原理(事件冒泡就是事件会向它的父级一级一级传递),把事件加到父级上，通过判断事件来源，执行相应的子元素的操作，事件代理首先可以极大减少事件绑定次数，提高性能；其次可以让新加入的子元素也可以拥有相同的操作。

07

jQuery知识总结(最全最精美)

使用: <script src="jquery-3.5.1/jquery-3.3.1.min.js"></script> 注意: 如果<script> 在body前面,应该使用 jQuery独有的预加载 $(function(){ 这里写代码 }) jQuery的基本设计思想和主要用法，就是"选择某个网页元素，然后对其进行某种操作"。选择器: 所有选择器 * 标签选择器标签名 ID选择器 #id 类选择器 .

02

前端学习笔记—CSS

文本垂直操作：vertical-align的使用图示。middle设置居中。 vertical-align 只对行内元素、行内块元素和表格单元格（table-cell）元素生效：不能用它垂直对齐块级元素。

01

5、React组件事件详解

2.在React中，每个事件处理回调函数都会自动绑定到组件实例（使用ES6语法创建的例外）；

01

JavaScript面试问题：事件委托和this

JavaScript不仅门槛低，而且是一门有趣、功能强大和非常重要的语言。各行各业的人发现自己最混乱的选择是JavaSscript编程语言。由于有着各种各样的背景，所以不是每个人都对JavaScript及其基本原理有广泛的认识。通常来书，除非你去参加工作面试才会去思考为什么或者怎么做，否则JavaScript只是你工作的内容。这个系类的目标是深入探讨JavaScript的一些概念和理论。主题来自于 Darcy Clarke的JavaScript典型面试问题列表。希望你不仅仅是为了答案而阅读完这篇文章，每一

05

前端系列第2集-如何让事件先冒泡后获取?

事件冒泡是指当一个元素上的事件被触发后，该事件会从该元素开始向上冒泡，直到传播到文档对象，并且可以被其他元素捕获。默认情况下，事件是先捕获后冒泡。如果希望事件先冒泡后获取，可以使用以下两种方法之一：

02

听说有个能优化性能的属性 contain

注意：实验环境都是 macOS 10.12.6 Chrome stable 61。第三方插件和 cotainer queries 用得少，所以没研究。

05

掌握这4 个关键的 CSS 属性，你才算入门 CSS

英文 | https://javascript.plainenglish.io/4-key-css-properties-explained-in-4-minutes-9567d1b5af86

03

Art of Android Development Reading Notes 3

本节和《Android群英传》中的第五章Scroll分析有关系，建议先阅读该章的总结

01

jQuery中on()、bind()、live()、delegate()之间的区别

首先简述下回涉及到的几个知识点： DOM树首先，可视化一个HMTL文档的DOM树是很有帮助的。一个简单的HTML页面看起来就像是这个样子：

03

什么是事件委托

事件委托（Event delegation）是一种常见的事件处理模式，它利用冒泡机制将事件的处理交给父元素或更高层级的元素来管理，而不是直接将事件处理程序绑定到每个子元素。

02

事件高级

eventTarget . addEventListener (type, listener[, useCapture] )

04

前端成神之路-定位

标准流在最底层 (海底) ------- 浮动的盒子在中间层 (海面) ------- 定位的盒子在最上层（天空）

02

事件高级

eventTarget.addEventListener()方法将指定的监听器注册到 eventTarget（目标对象）上，当该对象触发指定的事件时，就会执行事件处理函数。

02

浮动、定位

盒模型默认指块级元素；行内元素默认不能设置width、height、margin 行内元素==>块级元素: display:block 块级元素==>行内元素: display:inline 注意： 1. disply:inline-block 行内块元素 2. position:absolute|fixed 会将元素变为行内块

02

锋利的jQuery第三期

经过了前两期的基础铺垫，相信大家对jQuery也有了一定的了解，那么以后的几期将逐个介绍jQuery中的常见用法。

02

Vue2.x 写法示例

注意：只在可信内容上使用 v-html，永不用在用户提交的内容上，否则会导致XSS攻击。

02

Android 开发艺术探索笔记一

ViewRoot对应于ViewRootImpl类，它是连接windowmanager和DecorView的纽带，View的三大流程均是通过ViewRoot来完成的，在ActivityThread中，当activity创建完毕后，会将DecorView添加到window中，同时创建viewrootImpl对象，并将viewrootImpl与DecorView关联。View的绘制流程从viewRoot的performTraversals方法开始，经过三个过程将view绘制出来

01

前端学习(21)~css学习：如何让一个元素水平垂直居中?

如何让一个子元素在父容器里水平垂直居中？这个问题必考，在实战开发中，也应用得非常多。

01

JQuery事件处理

Jquery事件 1、绑定事件示例代码：绑定事件

什么是绑定事件？这是隐藏的内容，点击上面的内容会显示这里的内容。

<script language=”javascript”> //单击显示，再次点击隐藏 /*$(function(){ $(“a”).bind(‘click’,function(){ if($(this).next().is(“:visible”)){ $(this).next().h

05

CSS定位特性

CSS属性书写顺序布局定位属性：display / position / float / clear / visibility / overflow 自身属性：width / height / margin / padding / border / background 文本属性：color / font / text-decoration / text-align / vertical-align / white-space / break 其他属性：content / cursor /border-r

04

浮动、定位

版权声明：本文为博主原创文章，遵循 CC 4.0 by-sa 版权协议，转载请附上原文出处链接和本声明。

06

ipad上100vh和100%踩坑记「建议收藏」

即，flex容器中的绝对定位子元素会脱离flex布局流，也就是说flex: 1对子元素来说已经失效了。因此他的高度为绝对定位中的100%设置的高度，但是又设置了overflow:hidden，因此才会在虚拟键盘隐藏时出现一部分空白，从而导致了导航条的隐藏。

01

前端面试题锦集:第二期

只有当实例创建时已经存在data中的属性才是响应式的。如果用vm.b = 'test',那么修改这个值将没有任何作用。

02

jquery 绑定事件 - mouseover() mouseout() mouseenter() mouseleave() hover()

进入子元素也会触发mouseover()事件，那么如果#small的div没有嵌套在里面是否会触发呢？这样应该就不会。

03

React 无障碍

JSX 支持所有 aria-* HTML 属性。虽然大多数 React 的 DOM 变量和属性命名都使用驼峰命名（camelCased），但 aria-* 应该像其在 HTML 中一样使用带连字符的命名法（也叫诸如 hyphen-cased，kebab-case，lisp-case)。

03

hasLayout IE浏览器bug的来源

HTML5学堂：IE6浏览器曾经“坑”了一代又一代的前端工程师，了解浏览器兼容问题的同时，抱着“理科思维”的我们，必然会去思考为何IE6会这么“坑”，所以，我们来说说IE6浏览器bug的根源-haslayout。 hasLayout是什么 hasLayout是IE特有的一个属性。很多的ie下的css bug都与其息息相关。在ie中，一个元素要么自己对自身的内容进行计算大小和组织，要么依赖于父元素来计算尺寸和组织内容。当一个元素的hasLayout属性值为true时，它负责对自己和可能的后代元素进行尺寸计算和

04

Vue之插槽【贵组件因此得以延伸】

在 Vue 中，插槽（Slot）是一个非常重要的概念，它允许我们在组件中定义一些可供父组件填充内容的区域。

01

CSS布局(二) 盒子模型属性

盒子模型的属性宽高width/height 　　在CSS中，可以对任何块级元素设置显式高度。　　如果指定高度大于显示内容所需高度，多余的高度会产生一个视觉效果，就好像有额外的内边距一样；　　如果指定高度小于显示内容所需高度，取决于overflow属性，需要滚动条需要设置为overflow:auto。 auto 　　宽高和margin可以设置auto。对于块级元素来说，宽度设置为auto，则会尽可能的宽。详细来说，元素宽度=包含块宽度—元素水平外边距-元素水平边距宽度-元素水平内边距；　　高度设置为a

07

vue 中 key 值有什么作用？

相信大多数Vue开发者接触到key属性的时候是使用v-for进行列表渲染的时候，如果不使用key属性，Vue会产生警告，那么在这个时候key属性的作用是什么呢？

03

为什么要清除浮动及如何清除浮动

浮动其实是指元素从网页的正常流动中移除，即脱离文档流。选择将元素在其容器的左侧或右侧放置其实就是指元素在脱离文档流之后，元素一直向最左边或者右边靠拢，直至碰到父元素或者另一个浮动元素。

02

2020年Vue面试题汇总[通俗易懂]

Vue可能有些方面是不如React，不如Angular，但它是渐进的，没有强主张，你可以在原有大系统的上面，把一两个组件改用它实现，当jQuery用；也可以整个用它全家桶开发，当Angular用；还可以用它的视图，搭配你自己设计的整个下层用。你可以在底层数据逻辑的地方用OO和设计模式的那套理念，也可以函数式，都可以，它只是个轻量视图而已，只做了自己该做的事，没有做不该做的事，仅此而已。渐进式的含义，我的理解是：没有多做职责之外的事。

02

阿里前端二面必会react面试题总结1

在类定义中，我们可以使用到许多 React 特性，例如 state、各种组件生命周期钩子等，但是在函数定义中，我们却无能为力，因此 React 16.8 版本推出了一个新功能 (React Hooks)，通过它，可以更好的在函数定义组件中使用 React 特性。

03

App自动化测试|原生App元素定位方法（二）

appium在android端是调用其底层的UIAutomator2自动化测试框架去驱动自动化，在定位元素的时候，可以借助UIAutomator2的语法来实现定位。在代码实现上提供的API是find_element_by_android_uiautomator;利用android_uiautomator进行定位，语法必须属性值是双引号

02

响应式web布局中iframe的自适应

困境在响应式布局中，我们应该小心对待iframe元素，iframe元素的width和height属性设置了其宽度和高度，但是当包含块的宽度或高度小于iframe的宽度或高度时，会

css笔记 - 张鑫旭css课程笔记之 relative 篇

限制描述：absolute设置了方位值时，这些方位值是相对于position不为static的最近的父元素来定位的。如果父元素设置了relative，方位值就会相对于这个父元素，所以说relative限制absolute的方位值目标对象。

02

第79天：jQuery事件总结（二）

上一篇讲到jQuery中的事件，深入学习了加载DOM和事件绑定的相关知识，这篇主要深入讨论jQuery事件中的合成事件、事件冒泡和事件移除等内容。

02

jQuery：详解jQuery中的事件（二）

上一篇讲到jQuery中的事件，深入学习了加载DOM和事件绑定的相关知识，这篇主要深入讨论jQuery事件中的合成事件、事件冒泡和事件移除等内容。

03

寒假提升｜ Day9 CSS 第七部分

:nth-child 只计算父元素的第几个子元素 ,不管是否是同种类型,也不会排除干扰项.

02

第91天：CSS3 属性选择器、伪类选择器和伪元素选择器

除了以前学过的:link、:active、:visited、:hover，CSS3又新增了其它的伪类选择器。

03

Vue1.x 写法示例

常见内置过滤器 capitalize, uppercase, lowercase, json, limitBy, filterBy。所有见这里。

03

「Web编程API」- 03

请注意，本文编写于 2091 天前，最后修改于 174 天前，其中某些信息可能已经过时。

05

一个简洁、有趣的无限下拉方案

长列表渲染、无限下拉也算是前端开发老生常谈的问题之一了，本文将介绍一种简洁、巧妙、高效的方式来实现。话不多说，看下图，也许你可以发现什么

02

JavaScript事件详解

想必大家对JavaScript的事件都不陌生吧，大多数在网站开发的时候都会用到，这也是JavaScript的基本功之一，本文就为各位梳理一下相关知识。

01

JQ事件和事件对象

//mouseover()/mouseout()和mouseenter（）/mouseleave()的区别

02

CSS3选择器大全[通俗易懂]

1.CSS3选择器属性选择器在HTML中，通过各种各样的属性可以给元素增加很多附加的信息。例如，通过id属性可以将不同div元素进行区分。

01

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭