I want to check the clicked element is this element using jQuery

Question

$(document).on('click', function() {
  if ($(this).is('#clickedElement')) {
    console.log('this is clicked');
  } else {
    console.log('somewhere else clicked');
  }
});

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="menu-options-icon"><i class="far fa-trash" id="clickedElement"></i></div>

Want to check whether the div is clicked else somewhere is clicked using this way. Really appreciate your help, explain if possible.Thanks <3

Answer 1

Inside a jQuery function event handler, this will refer to the element you attached the listener to. Here, it's document, so that's what this is.

$(document).on('click', function() {
  console.log(this === document);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="menu-options-icon"><i class="far fa-trash" id="clickedElement">click</i></div>

Check if the event.target (which will point to the element the event was dispatched to - the innermost element) is the clicked element instead.

$(document).on('click', function(e) {
  if ($(e.target).is('#clickedElement')) {
    console.log('this is clicked');
  } else {
    console.log('somewhere else clicked');
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="menu-options-icon"><i class="far fa-trash" id="clickedElement">click</i></div>