How to enable and disable document event handler (specifically click)

Question

I have a button, clicking on which, I have to enable the click event handler on the entire document. Once someone clicks now, I want to capture the dom selector of that element and disable the event handler again.

Is this question asked already? I searched a lot but couldn't find anything relevant. There are a lot of solutions on enabling or disabling event handler on a particular element, but I have to do it over the entire document. Here is my code -

JavaScript -

<script>
  var select_target = false;
  $(document).click(function(event) {
    if (select_target) {
      element.style.backgroundColor = "#FDFF47";
      var text = $(event.target).text();
      console.log(text) //This text should be the DOM Selector, which I'm not able to retrieve
      select_target = false
    }
  })
  $('.select_target').click(function() {
    select_target = true
  })
</script>

HTML -

<!-- Lot of code from the other parts of the webpage -->
<button name="ignore" type="button" class="btn btn-primary btn-md m-1 select_target">
  Select Target
</button>
<!-- Lot of code from the other parts of the webpage -->

This gives me Select Target as the output instead of the DOM Selector of the element, which I wasn't expecting to be the target button in the first place, but whatever I click after clicking the select target button.

I know the code looks clumsy, but any help would be appreciated. Thanks!

Answer 1

It looks like the following code does what I'm expecting. It's for everyone who wants a similar thing to happen ie, To be able to select the element from the page on which you want to perform specific operations with a clean and modifiable code.

Javascript -

<script>
  var select_target = false;
  $(document).click(function(event) {
    if (select_target) {
      event.preventDefault(); //If you click a link or a button, this helps in just selecting it and it won't perform it's default operation.
      var text = $(event.target).text();
      console.log(text)
      select_target = false;
    }
  })
  $(document).ready(function() {
    $("body *").mouseenter(function(el){
      if(select_target){
        $(el.target).addClass("red-hover-box"); //To highlight the elements on hover
      }
    })
    $("body *").mouseout(function(el){
      if(select_target){
        $(el.target).removeClass("red-hover-box"); //To remove the highlight on the elements. This will keep the element highlighted if you click on it, since the select_target's value would be false after the click.
      }
    })
  })
  $('.select_target').click(function() {
    e.stopPropagation(); //To prevent the click on the button to be handled by the event listener.
    select_target = true
  })
</script>

CSS -

.red-hover-box{
  border:1px solid red;
}

HTML -

<!-- Lot of code from the other parts of the webpage -->
<button name="ignore" type="button" class="btn btn-primary btn-md m-1 select_target">
  Select Target
</button>
<!-- Lot of code from the other parts of the webpage -->

I'm still now able to figure out on how to get a unique identifier for the HTML element that has been clicked, and would update this answer once it's been figured out.

Thanks!