JavaScript 如何忽略覆盖图像的鼠标交互

忽略覆盖图像上的鼠标交互可以通过CSS属性pointer-events来控制。它是一个定义页面元素是否对pointer-events作出反应的属性。

语法：

pointer-events: auto\none;

示例: 下面的示例演示了pointer-events属性的用法。

<!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= 
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20200618233603/gfg3.png"></a> 
    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>

输出：

JavaScript 如何忽略覆盖图像的鼠标交互