时间戳

首页 > 解决方案 > 如何让 event.target 返回特定的目标元素？

javascript - 如何让 event.target 返回特定的目标元素？

问题描述

在我的反应应用程序中，我有这个按钮，它就像状态切换器一样，这个按钮有一个 id 属性/属性，这个按钮包装了一个字体真棒图标。

<button id={feedId}>
   <i className={isStatus === 'Y' ? 'fa fa-unlock' : 'fa fa-lock'} /> 
   {isStatus === 'Y' ? 'Active' : 'Inactive'}
</button>

现在取决于您单击按钮的位置，event.target将返回带有 id 的整个按钮或仅返回<i>标记的图标我如何确保整个按钮作为 event.target 的一部分而不是仅仅返回<i>

标签： javascriptreactjs

解决方案

您可以使用currentTarget

function test(e) {
  console.log('Target ', e.target);
  console.log('Current Target ', e.currentTarget)
}
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<button id="test" onclick="test(event)">
       <i class="fa fa-quora" aria-hidden="true"></i>
       Text
    </button>

推荐阅读