How to ignore mouse interaction on overlay image using JavaScript ?

Ignoring mouse interaction on overlay image can be controlled by a CSS property namely pointer-events.
It is a property that defines if an element of the page will react to the pointer-events.

Syntax:

pointer-events: auto\none;

Example: The following example demonstrates the use of pointer-events property.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
  
<head>
  <title>CSS pointer events</title>
  
  <style>
    .main {
      position: relative;
      width: 450px;
      font: 25px Verdana;
    }
  
    .overlay {
      position: absolute;
      left: 0px;
      top: 0;
      width: 225px;
      height: 225px;
    }
  
    .pointer-events-none {
      pointer-events: none;
    }
  </style>
  
  <script>
    window.onload = function () {
      document.getElementById(
        "enable-disable-pointer-events")
        .onclick = function () {
          document.getElementById("overlay")
            .className = "overlay " 
            + ((this.checked) ? 
            "pointer-events-none" : "");
      };
    };
  </script>
</head>
  
<body>
  <div class="main">
    <a href="https://www.geeksforgeeks.org/">
      <img
        src=
    GeeksforGeeks: A computer 
    Science portal for Geeks.
      
    <div id="overlay" class="overlay"></div>
      
    <p>
      <input id="enable-disable-pointer-events" 
          type="checkbox">
      <label for="enable-disable-pointer-events">
        Disable pointer events for image
      </label>
    </p>
  </div>
</body>
  
</html>

chevron_right


Output:
When the checkbox was not selected:

When the checkbox is selected:

Final Output:

full-stack-img




My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.