how do I get event.target to return a specific target element?

Question

In my react application I have this button which acts like state switcher this button has an id attribute/prop and this button wraps a font-awesome icon.

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

Now depending upon where you click on the button the event.target would return the entire button with id or just the icon that's <i> tag how do I make sure that entire button gets return as part of event.target instead of just <i>

Why, what do you ultimately want to do? Sounds like the XY problem. — Etheryte
– Etheryte, Commented Aug 22, 2018 at 17:28
Set up the event handler on the button and then check event.target to see if it is the button or not. Only proceed when it is the button. Because of bubbling, the button will receive the event all the time. — Scott Marcus
– Scott Marcus, Commented Aug 22, 2018 at 17:28
@ Hunter McMillen To get the id there are several such buttons in the application. id plays important part as it is use to make api calls — HVenom
– HVenom, Commented Aug 22, 2018 at 17:30

brk · Accepted Answer · 2018-08-22 17:36:39Z

3

You can use 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>

answered Aug 22, 2018 at 17:36

brk

50.3k10 gold badges59 silver badges85 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

how do I get event.target to return a specific target element?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related