如何使用 JavaScript 忽略覆盖图像上的鼠标交互？

忽略覆盖图像上的鼠标交互可以通过 CSS 属性来控制，即pointer-events 。
它是定义页面元素是否会对指针事件做出反应的属性。

句法：

pointer-events: auto\none;

示例：下面的示例演示了指针事件属性的使用。

  

  CSS pointer events
  
  
    .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;
    }
  
  
  
    window.onload = function () {
      document.getElementById(
        "enable-disable-pointer-events")
        .onclick = function () {
          document.getElementById("overlay")
            .className = "overlay " 
            + ((this.checked) ? 
            "pointer-events-none" : "");
      };
    };
  

  

  
    
      
    GeeksforGeeks: A computer 
    Science portal for Geeks.
      
    
      
    
      
      
        Disable pointer events for image
      
    
  

  

输出：
未选中复选框时：

当复选框被选中时：

最终输出：