react 获取属性的问题，currentTarget确实是可以的，target确实是有问题的

最新推荐文章于 2023-02-15 21:30:35 发布

原创最新推荐文章于 2023-02-15 21:30:35 发布 · 4.5k 阅读

0 ·

CC 4.0 BY-SA版权

本文讲解了在DOM事件中，如何正确区分使用event.currentTarget与event.target，并提供了在React环境中正确获取父节点属性data-cc的方法。

父节点有属性data-cc
这时候点击父节点获取属性
正确方式是
event.currentTarget.getAttribute(“data-cc”)

而不是

event.target.getAttribute(“data-cc”)

ps:
1.
currentTarget 返回其事件监听器触发该事件的元素。
target 返回触发此事件的元素（事件的目标节点）。
2.react添加属性必须是 data-xx 形式

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

fortunegrant

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

React篇

深夜代码酒神

06-27

584

react篇

React 18 系统精讲（四）react event事件处理

2301_76510083的博客

04-04

576

React 18 系统精讲（四）react event事件处理

参与评论您还未登录，请先登录后发表或查看评论

js原型方法 react target 与 currentTarget

qq_36258899的博客

03-13

644

target 与 currentTarget target:触发事件的元素。有可能是冒泡的元素 currentTarget : 事件绑定的元素。收录说明：以前都是使用target，对于currentTarget没有什么概念，偶然编辑器自带函数有这个方法，是用之后，发现，这方法，可以不用去阻止冒泡，就是事件本身。每个事件都有原型，但是基本没太在意过这些属性。这也许是基础不好的原因。 ...

Vue中currentTarget $event 的用法

hh3167253066的博客

08-21

2059

<button @click = “clickfun($event)”>点击</button> methods: { clickfun(e) { // e.target 是你当前点击的元素 // e.currentTarget 是你绑定事件的元素 #获得点击元素的前一个元素 e.currentTarget.previousElementSibling.innerHTML #获得点击元素的第一个子元素 e.currentTarget.fi

e.target与e.currentTarget多一个current到底经历了什么？

不见浅诗的博客

04-21

753

e.target与e.currentTarget到底怎么区分本篇文章参考以下博文文章目录

e.target和e.currentTarget区别

qq_36934775的博客

11-03

334

参考链接：https://www.cnblogs.com/lovemomo/p/10751389.html

在事件中有两个属性，分别是target 和currenttarget ，着我怎么理解

最新发布

12-10

- 在**React**等框架中，合成事件也遵循相同的规则，但属性名可能略有不同（如 `e.target` 和 `e.currentTarget`）。 > 关键记忆点：`target` 是**事件起点**，`currentTarget` 是**事件当前处理点**。 §§相关...

上传input的文件，取这个文件是e.target还是e.currentTarget

07-23

具体来说，问题是在上传文件时，应该使用`e.target`还是`e.currentTarget`来获取文件。在JavaScript事件处理中，`target`和`currentTarget`是两个不同的属性： - `e.target`：指的是触发事件的实际元素（即事件...

JavaScript事件处理中target与currentTarget的区别与应用

在JavaScript的事件处理机制中，`event.target`与`event.currentTarget`是两个极为关键但又常被混淆的属性。理解它们之间的区别和应用场景，对于构建高效、可维护且具备良好扩展性的前端交互逻辑至关重要。本文将...

react点击事件获取事件

03-22

另外，用户可能会遇到事件池的问题，React的合成事件会被重用，所以如果异步访问事件属性，需要用e.persist()，不过这在React 17以后可能已经不需要了，需要确认一下文档。这部分可能需要简单提及，避免用户遇到问题...

react指定项单条删除 e.target

qq_43676606的博客

12-31

500

clearHistory(e) { //删除全部历史记录 // localStorage.removeItem('historyItems'); //删除单条历史记录 const i=e.target.getAttribute('index'); console.log(i) const l...

你或许没有不知道的那些 React 事件的知识点

qq_43477721的博客

08-04

244

首先我们来看一段很简单的 react 代码 import React from 'react' class EventDemo extends React.Component { render() { return <a href="https://baidu.com/" onClick={this.clickHandler}> click me </a> } // 获取 event clickHandler = (event) =&g

使用event.target.getAttribute()返回值为null

Rainman_的博客

05-08

2233

<g id="blocklyDraggable_1" class="draggable"onmousedown="selectElement(event)"> <rect x="50" y="20" width="100" height="60" style="fill: blueviolet;" /> </g> function selectElemen...

React 核心概念（3）

09-03

1886

React 核心概念（3） 1.事件处理 React 元素的事件处理和 DOM 元素的很相似，但是有一点语法上的不同：（引自：事件处理） React 事件的命名采用小驼峰式（camelCase），而不是纯小写。使用 JSX 语法时你需要传入一个函数作为事件处理函数，而不是一个字符串。 1.1 绑定事件还记得在之前文章中我们写过的增加计数的 class 组件吗？我们这里会再一次用到： import React from 'reac

React.js-基础知识篇

weixin_39866160的博客

02-15

390

React 中事件对象event的currentTarget和target属性的区别。

react 获取属性的正确打开方式

domBREAKPoint的博客

08-05

3321

例如有一个组件父节点有属性data-cc 这时候点击父节点获取属性正确方式是 event.currentTarget.getAttribute(“data-cc”)而不是 event.target.getAttribute(“data-cc”)ps: currentTarget 返回其事件监听器触发该事件的元素。 target 返回触发此事件的元素（事件的目标节点）。

小程序页面传值细节——target和currentTarget的区别

qq_44036956的博客

09-30

447

小程序中target和currentTarget的区别先写结论 1、target 你点哪获取哪没有就是空 2、currentTarget 你点哪获取点的哪个元素得父元素没有就是空 3、没有子元素的时候这俩相等下面图解

【小程序】获取到的e.target与e.currentTarget区别