Open In App

How to ignore mouse interaction on overlay image using JavaScript ?

Improve
Improve
Like Article
Like
Save
Share
Report

Ignoring mouse interaction on overlay images 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.

html




<!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>


 Output:

 



Last Updated : 15 Feb, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads