如何防止在图像消失之前点击视频？

Question

或者，如何防止从图像后面点击视频？

如果视频前面有图像，如何防止它们被点击，图像后面的视频？

这里有什么作用？

幕布升起后，屏幕上出现关闭按钮，请先点击关闭按钮。

代码https://jsfiddle.net/5abh8Lm1/1/

接下来我将进入此屏幕，在这里我可以单击图像后面的视频。

如何防止这种情况发生？

如何防止视频在图像消失之前被点击？

.splash-screen2 {
    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed;
    z-index: 0;
    inset: 0 0 0 0;
    Background-color: black;
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="165" height="165" viewBox="0 0 165 165"><rect x="80" y="80" width="10" height="10" style="stroke: rgb(0, 0, 0); stroke-width: 0px; fill: rgb(17, 85, 204);" /><rect x="72.5" y="72.5" width="25" height="25" style="fill: none; stroke-width: 5px; stroke: rgb(17, 85, 204);" /><rect x="62.5" y="62.5" width="45" height="45" style="fill: none; stroke-width: 5px; stroke: rgb(17, 85, 204);" /><rect x="52.5" y="52.5" width="65" height="65" style="fill: none; stroke-width: 5px; stroke: rgb(17, 85, 204);" /><rect x="42.5" y="42.5" width="85" height="85" style="fill: none; stroke-width: 5px; stroke: rgb(17, 85, 204);" /><rect x="32.5" y="32.5" width="105" height="105" style="fill: none; stroke-width: 5px; stroke: rgb(17, 85, 204);" /><rect x="22.5" y="22.5" width="125" height="125" style="fill: none; stroke-width: 5px; stroke: rgb(17, 85, 204);" /><rect x="12.5" y="12.5" width="145" height="145" style="fill: none; stroke-width: 5px; stroke: rgb(17, 85, 204);" /><rect x="2.5" y="2.5" width="165" height="165" style="fill: none; stroke-width: 5px; stroke: rgb(17, 85, 204);" /></svg>');
    opacity: 1;
    /* Set transition duration to 1 seconds */
    pointer-events: none;
    /*dissable mouse clicking */
    cursor: default;
  }
  .splash-screen2.hide {
    opacity: 0;
    transition-delay: 10s;
    /* Add a delay of 1 seconds before the opacity changes to 0 */
    pointer-events: none;
    /* Re-enable mouse clicking after 1 seconds */
    cursor: default;
  }

Answer 1

您需要做的第一件事是从

pointer-events: none;

和

.splash-screen2

选择器中删除

.splash-screen2.hide

：

...
  .splash-screen2 {
    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed;
    z-index: 0;
    inset: 0 0 0 0;
    ...
    opacity: 1;
    pointer-events: none; /* remove this */
    cursor: default;
  }
  .splash-screen2.hide {
    opacity: 0;
    transition-delay: 10s;
    pointer-events: none; /* remove this */
    cursor: default;
  }
...

之后，由于视频应该在过渡结束后出现，因此您可以在

transitionend

上监听

.splash-screen2

事件来了解过渡是否结束：

...
splashScreen2.addEventListener('transitionend', function(){
    splashScreen2.style.pointerEvents = 'none';
});
...

这样，指针将不会被阻挡在隐藏的启动屏幕上，直到它完全转换为隐藏。

这是分叉的jsfiddle

Answer 2

根据您的代码，最简单的方法是在“消失”后向

.splash-screen2

添加一些类：

splashScreen2.classList.add('hide');
setTimeout(() => splashScreen2.classList.add('hide-end'), 10000);

并添加一些考虑到这一点的CSS：

#myModal:not(:has(.splash-screen2.hide-end)) .containerA,
#myModal:not(:has(.splash-screen2.hide-end)) .containerA *{
   pointer-events: none !important;
}

代码：jsfiddle.net