[FIXED] How to compare e.currentTarget and e.Target?

Issue

I am getting events on button click and background click. In background click I am getting currentTarget and Target both same but in case of button, I am getting different. How can I compare if they are equal or not so that on equal I can perform some operation?

Solution

event.currentTarget refers to the element that the listener was bound to.

Here in the demo we can see if we do actually click the div (possible because of enormous padding) the the match evaluator e.target === e.currentTarget is in fact true.

document.querySelector('#test').addEventListener('click', (e) => {
  if(e.target === e.currentTarget) console.log('yes');
});

div#test {
  padding: 20px;
  background-color: red;
}

div#test p {
  background-color: blue;
}

<div id="test">
  Try clicking here and then the P
  <p id="test2">Test</p>
</div>

Answered By - Bibberty

Answer Checked By - Timothy Miller (PHPFixing Admin)