为何CSS中pointer-events: none与touch-action: none未生效？

我编写了如下代码，但其中的pointer-events: none; touch-action: none;并未生效。当红色遮罩元素明显显示并覆盖在蓝色可点击元素上方时，我仍能点击下方的蓝色元素！

代码示例 #

JavaScript #

// JavaScript click function
function handleClick() {
    alert("Element clicked!");
}

// Get the element by its ID
var clickableElement = document.getElementById("myClickableElement");

// Attach the click event listener
clickableElement.addEventListener("click", handleClick);

CSS #

.cover {
    background: red;
    position: fixed;
    width: 100%;
    height: 100%;
    opacity: 0;
    animation: fade-out 4s /*infinite*/;
    z-index: 9999999999999;
   pointer-events: none;
   touch-action: none;
   visibility: hidden;

}

@keyframes fade-out {
    0%, 85% {
        opacity: 1;
     visibility: visible;
    }
    100% {
        opacity: 0;
    visibility: hidden;
    
    }
}

.othestuff{
    background: blue;
    position: absolute;
    width: 100%;
    height: 100%;

    z-index: 999;
  
}

HTML #

<div class="cover">
</div>

<div class="othestuff" id="myClickableElement">

</div>

问题原因与解决方法 #

你把pointer-events的属性值搞反了！

• pointer-events: none的作用是让元素不拦截任何鼠标/触摸事件，点击会直接穿透到下方元素，这和你想要的“遮罩显示时阻止点击下方”完全相反。
• 正确逻辑是：遮罩可见时拦截点击（设置pointer-events: auto，默认值）；遮罩隐藏时允许点击穿透（设置pointer-events: none）。

修改后的CSS代码 #

.cover {
    background: red;
    position: fixed;
    width: 100%;
    height: 100%;
    opacity: 0;
    animation: fade-out 4s;
    z-index: 9999999999999;
    touch-action: none;
    visibility: hidden;
    pointer-events: none; /* 初始隐藏状态允许点击穿透 */
}

@keyframes fade-out {
    0%, 85% {
        opacity: 1;
        visibility: visible;
        pointer-events: auto; /* 遮罩可见时拦截点击，阻止穿透 */
    }
    100% {
        opacity: 0;
        visibility: hidden;
        pointer-events: none; /* 遮罩隐藏时恢复点击穿透 */
    }
}

.othestuff{
    background: blue;
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 999;
}

补充说明：visibility: visible只是让元素可见，但如果pointer-events仍为none，点击依然会穿透。必须在动画关键帧里同步切换pointer-events的属性值，才能实现“显示拦截、隐藏允许”的效果。

内容的提问来源于stack exchange，提问作者drago