开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

如何从e.target中获取嵌套DIV的ID？

从e.target中获取嵌套DIV的ID可以通过以下步骤实现：

首先，需要了解e.target是一个事件对象，它代表触发事件的元素。
使用e.target可以获取到当前触发事件的元素的引用。
如果需要获取嵌套DIV的ID，可以通过e.target.id来获取当前元素的ID属性。
如果当前元素没有ID属性，可以通过e.target.parentNode来获取父元素的引用，然后再通过parentNode.id来获取父元素的ID属性。
如果嵌套的DIV还有更多层级，可以使用类似的方式通过parentNode来获取上一级元素的引用，然后再通过parentNode.id来获取上一级元素的ID属性，以此类推直到获取到目标DIV的ID。

需要注意的是，以上方法假设嵌套的DIV元素都有ID属性，如果没有ID属性，可以考虑使用其他属性或者通过遍历DOM树的方式来获取目标DIV的引用。

推荐的腾讯云相关产品：腾讯云云服务器（CVM）

产品介绍链接地址：https://cloud.tencent.com/product/cvm

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

有帮助

没帮助

相关·内容

事件高级

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

02

vue页面采用原生方式拖动

主要的难点是怎么获取要拖动的元素，e.target是获取的目标元素，可以采用while循环

01

准确获取事件源的任意父级元素（事件委托）

当我们想给一个列表中的每个列表项添加相同的事件时，我相信最先想到的方法一定是事件委托，通过将事件监听器设置在其父节点上，利用事件冒泡的原理实现想要的操作，这样只进行了一次的dom操作，提高了程序的性能。通常我们都会使用事件源e.target来获取点击的元素，从而可以知道我们点击的是谁。

03

Vue中的事件绑定和修饰符

调用方法只写了方法名没写括号，怎么看起来不像是调用方法。但是就是这样调用的，如果我们加上了括号会怎么样呢？

01

浅谈JavaScript的事件（事件处理程序）

事件就是用户或者浏览器自身执行的某种动作。诸如click、load和mouseover，都是事件的名字。而响应某个事件的函数就叫事件处理程序。事件处理程序的名字以“on”开头，比如click事件的事件处理程序是onclick。为事件指定事件处理程序的方式有多种方式。 HTML事件处理程序元素支持的事件，都可以使用与相应事件处理程序同名的HTML特性来指定。这个特性的值能支持一定的JavaScript代码。例如，在单击按钮的时候执行一些JavaScript代码。 <div id="aa" onclic

05

事件高级

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

04

javascript 事件基础

一：事件流事件流描述的是从页面中接收事件的顺序。事件冒泡

05

「Web编程API」- 03

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

05

移动端模拟手机联系人触摸A~Z导航

HTML5学堂：今天要与大家分享一个当前移动端很常见的效果，类似于手机联系人的快速导航功能，即当触摸a~z的字母时，能够相对应的显示文字。有些手机的音乐导航也类似，具体可详见下图： touchmove

05

前端成神之路-WebAPIs03

node.removeChild() 方法从 node节点中删除一个子节点，返回删除的节点。

02

教你让b站视频的弹幕发出语音！

侦查弹幕非常简单，我常介绍的：用元素选择器，选中窗口，一看这个类名，然后看这里面这一个个标签，就知道和弹幕有关。

01

（四）原生 WEB 拖动排序

使用原生的拖动排序在我们网页开发中经常需要做拖动排序 📷 源码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>排序</title>

01

从零开始学 Web 之 jQuery（七）事件冒泡，事件参数对象，链式编程原理

事件冒泡：当一个元素触发某个事件的时候，会把这个事件传播到其父元素，一直到顶层元素。

04

flask 鼠标进入时显示弹窗(flask 99)

$(function () { var default_error_message = 'Server error, please try again later.';

02

基于VUE选择上传图片并在页面显示（图片可删除）

$(‘div#img-wrapper img’).attr(‘src’,”);

02

前端两三问

点击A的时候获取当前选中数据的所属子项，然后拿该子项中已选的去和全部比对得出未选的，然后拿未选的去blist进行比对，如果blist中出现未选的则将其删除。

03

HTML5-拖拽

将div中元素拖到另一个中 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> *{ margin: 0; padding: 0; } .div1{ width: 200px; height: 200px;

02

js 事件笔记

在Web中, 事件在浏览器窗口中被触发，执行事先绑定的事件处理器（也就是事件触发时会运行的代码块），对事件做出响应。用户在浏览器的任何一个操作都会去触发一个事件，JavaScript采用异步事件驱动编程模型，当文档、浏览器、元素或与之相关对象发生特定事情时，浏览器会产生事件。

02

js绑定事件代理的坑

js通过事件代理的方式绑定跳转事件，我这里的逻辑是把click事件绑定在最外层container上面，如果e.target包含我已经写好的class，则执行跳转逻辑。但是这种方式好像只能是在点击的元素的上面，也就是最内层的元素上面有相应的class才能跳转，在外层加同样的class不生效，说明是我对于事件代理的理解不够深刻，其实事件代理的作用就是为了把目标元素的事件绑定在外层做代理，我想实现外层元素点击，固然不可生效。

02

vue获取当前点击元素的父元素、子元素、上级元素等

methods: { clickfun(e) { // e.target 是你当前点击的元素 // e.currentTarget 是你绑定事件的元素 #获得点击元素的前一个元素 e.currentTarget.previousElementSibling.innerHTML #获得点击元素的第一个子元素 e.curre

03

js逐步教你实现原生电影院系统

css逻辑；第一步body;清除系统默认的样式. 第二步h1：body里面的flex布局,主轴x居中,侧轴y垂直居中.高度为height: 100vh;，为什么,因为系统默认宽为100%，高为0,要垂直居中得100vh高度才行啊. 第三步：

01

react是如何实现冒泡的

react 自己实现了一套事件冒泡机制，将所有事件都用代理的方式绑定到 document上。这里谈下我对 react 的冒泡实现的理解，不对的请指出。

02

如何充分利用Composition API对Vue3项目进行代码抽离

在2020年，Vue3的学习一直被我鸽到了11月份，在学完以后，我自己做了一个Vue3的小项目nav-url，也整理了我对于如何快速上手Vue3的几篇博客，很高兴受到了大家的指点和喜欢：

03

Thinkphp5学习018-项目安全-添加学生-简单的异步调用(ajax)

content="width=device-width, user-scalable=no, initial-scale=1.0,maximum-scale=1.0, minimum-scale=1.0">

02

如何充分利用Composition API对Vue3项目进行代码抽离

在2020年，Vue3的学习一直被我鸽到了11月份，在学完以后，我自己做了一个Vue3的小项目nav-url，也整理了我对于如何快速上手Vue3的几篇博客，很高兴受到了大家的指点和喜欢：

02

实战SSM_O2O商铺_42【前端展示】店铺列表页面View层的实现

实战SSM_O2O商铺_41【前端展示】店铺列表页面Dao+Service+Controller层的实现后端的功能实现后，来看下前端在展示层吧

02

浅析 5 种 React 组件设计模式

复合组件模式是一种通过将多个简单组件组合在一起创建更复杂组件的方法。这种模式使得组件的逻辑分离，每个简单组件负责特定的功能。通过复合组件，可以轻松构建可复用的、功能完备的组件。

01

JavaScript绑定事件的三种方式

这种方式就是在一个元素上面直接绑定了一个点击onclick事件，此事件为DOM 0级标准。同时，这个事件的优先级是最高的。

03

一次关于js事件出发机制反常的解决记录

起因：正常情况下我点击s2时是先弹出我是children，再弹出我是father，但是却出现了先弹出我是father，后弹出我是children的情况，这种情况是在和安卓app交互的h5页面中出现的，本地测试没有问题，但是在安卓打包的内嵌h5页面就出现了问题。简单化的代码先展示出来。 html代码如下

事件绑定如下 $('#fathe

05

事件高级

给元素添加事件，称为注册事件或者绑定事件。注册事件有两种方式：传统方式和方法监听注册方式

01

前端day16-JS(WebApi)学习笔记（事件补充、事件冒泡与捕获）

var code = e.keyCode || e.charCode || e.which;

00

React大法：如何轻松编写动态PDF文件

在本文中，我们将学习如何通过接受用户的输入来生成动态 PDF。一些用例包括根据收到的数据生成invoices、certificates、resumes、等。reports

06

实现博客园的日历效果的原生js插件

下面是calendar.js插件文件的代码。 //js日历 (function(){ var calendar = function(calendarId){ //日历对象不存在，返回日历 if(!(this instanceof calendar)){ return new calendar(); } //获取当前日历对象 var c =this; //获取引用日历的节点id，这是外面提供的要放哪里的id var calendarId

01

写一个图片轮播效果的Demo(自动播放)附代码

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/sinat_35512245/article/details/52916152

01

HTML5 拖放(Drag和drop)

在工作当中，我们会常常见到像UC浏览器的新选项卡一样的可以自定义拖拽摆放效果。大的像淘宝的装修，QQ空间装扮等，小到一些游戏等等随处可见拖放的使用场景。

02

React报错之Parameter 'event' implicitly has an 'any' type

当我们不在事件处理函数中为事件声明类型时，会产生"Parameter 'event' implicitly has an 'any' type"错误。为了解决该错误，显示地为event参数声明类型。比如说，在input元素上，将处理change事件声明类型为React.ChangeEvent<HTMLInputElement> 。

02

【如果你要学JS XV】——趣学[ 阻止冒泡事件、常见的鼠标事件和键盘事件 ]

简单来说就是this指向的是绑定事件的元素，e.target返回的是所触发事件的元素

00

事件

利用 on 开头的事件，如 onclick, 同一个元素同一个事件只能设置一个处理函数，出现多个处理函数的话，后面的会覆盖前面的。

02

H5拖放原生js将图片拖放另外一个元素里

拖放是一种常见的特性，即抓取对象以后拖到另一个位置。在 HTML5 中，拖放是标准的一部分，任何元素都能够拖放

03

【React】786- 探索 React 合成事件

React 是一个 Facebook 开源的，用于构建用户界面的 JavaScript 库。

04

bootstrap 导航栏淡入淡出常用样式

菜鸟教程
iOS
Java
- jmeter
- ejb

菜鸟教程是一个提供最新的web技术站点，本站免费提供了建站相关的技术文档，帮助广大web技术爱好者快速入门并建立自己的网站。菜鸟先飞早入行——学的不仅是技术，更是梦想。

iOS 是一个由苹果公司开发和发布的手机操作系统。最初是于 2007 年首次发布 iPhone、iPod Touch 和 Apple TV。iOS 派生自 OS X，它们共享 Darwin 基础。OS X 操作系统是用在苹果电脑上，iOS 是苹果的移动版本。

jMeter 是一款开源的测试软件。它是 100% 纯 Java 应用程序，用于负载和性能测试。

Enterprise Java Beans（EJB）是一个创建高度可扩展性和强大企业级应用程序的开发架构，部署在兼容应用程序服务器（比如 JBOSS、Web Logic 等）的 J2EE 上。

05

探索 React 合成事件

React 合成事件（SyntheticEvent）是 React 模拟原生 DOM 事件所有能力的一个事件对象，即浏览器原生事件的跨浏览器包装器。它根据 W3C 规范来定义合成事件，兼容所有浏览器，拥有与浏览器原生事件相同的接口。

02

react入门（五）：事件处理、条件渲染、列表&keys、表单

一、事件处理 React事件绑定属性的命名采用驼峰式写法，而不是小写。直接看代码两种方式绑定事件并传参数第一种: constructor(props) { super(props); //在dom上用bind函数绑定了this,这里可以省略 this.handleClick = this.handleClick.bind(this); } handleClick(value, e) { //e要写在value后面 console.log(value);

02

js中的事件（event）

我们可以简单的把事件理解为浏览器的感知系统。比如说：他可以感觉到用户是否点击（click）了页面、鼠标是否进入了页面的某个元素上面（mouseover或mouseenter）、鼠标是否离开了网页（mouseout或mouseleave）、浏览器是都加载完了页面上的资源（window.onload)、文档树是否生成（DOMContentLoaded）、键盘上的某个键是否按下（keydown)、鼠标的滚轮是否滚动了等等。

03

通过 JS 实现简单的拖拽功能并且可以在特定元素上禁止拖拽

前言关于讲解 JS 的拖拽功能的文章数不胜数，我确实没有必要大费周章再写一篇重复的文章来吸引眼球。本文的重点是讲解如何在某些特定的元素上禁止拖拽。这是我在编写插件时遇到的问题，其实很多插件的拖拽功能并没有处理这些细节，经过翻阅 jquery ui 的源码才找到答案。拖拽实现关于拖拽功能不再啰嗦，直接贴代码 /** * [draggable 拖拽方法] * @param {[type]} modal [移动元素] * @param {[type]} handle [拖拽元素] */ var

09

20个例子入门Q.js

本文希望通过20个简单的例子让没用过Q.js的同学快速掌握其基本用法 1. 新建实例 html代码：

js代码： var q =

07

20个例子入门Q.js

Q.js是一个mvvm框架，可以通过构造函数Q new 一个viewModel的实例，其传入的参数el即要绑定的view，可以是selector也可以直接是dom元素，而第二个参数data即model，也就是数据对象。

01

手把手教你超可爱的导航栏

嘿！大家好哇。今天来带大家做一个可爱?的滑动导航栏效果，这个demo很基础，但是使用场景非常广泛噢！作为前端大白，今天就手把手一步一步教你实现它吧！❤️ 实现效果看！这个滑动的效果很有趣吧！这样的滑

03

高性能JavaScript

原因：数据存储位置对大地代码整体性能会产生重要的影响，直接变量和局部变量的访问速度快于数组和对象成员。因为局部变量位于作用域链的第一个对象中，全局变量位于作用域链的最后一环。变量在作用域链的位置越深，访问的时间就越长。

01

组件左右拖动

<li v-for="(item,index) in componentsList" :key="index"

01

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭