显示没有“hitbox”的元素（不接受鼠标/触摸输入）答案

【问题标题】：Show an element without "hitbox" (does not take mouse/touch input)显示没有“hitbox”的元素（不接受鼠标/触摸输入）
【发布时间】：2015-08-26 17:34:01
【问题描述】：

我想要实现的是一种通知框（div 元素）。我想用一些不透明度来展示它。而且我需要盒子对事件“不可见”。例如，如果框在按钮上方，我仍然可以通过框点击按钮。

有些人可能会建议让它由用户移动，但当前的 UI 不允许我这样做。

可以通过任何方式实现吗？ HTML、CSS、Javascript 和 jQuery 均可用。

我当前的通知框 CSS：

.notification-box {
    position: fixed;
    top: 0;
    left: 100vw;
    transform: translate(-100%, 0);
}

【问题讨论】：

标签： javascript jquery html css

【解决方案1】：

使用 post 中所述的 css 指针事件

.notification-box {
    position: fixed;
    top: 0;
    left: 100vw;
    transform: translate(-100%, 0);
    pointer-events: none;
}

这是一个codepen 展示它的实际应用。

【讨论】：

感谢您的示例。完美运行！
没问题！您能否将其标记为答案，以便其他寻找答案的人知道它有效？
是的，已标记。当我发表评论时，它没有超过 15 分钟。

【解决方案2】：

这并不完全是重复的，但这个问题的答案也是你问题的答案。

jQuery - Trigger click even on element behind

您可以使用 CSS pointer-events属性：

CSS 属性pointer-events 允许作者控制特定图形元素在什么情况下（如果有）可以变为鼠标事件的目标。
#element {
  pointer-events: none;
}
或者你可以triggerclick事件：
$('#box').click(function(){
   $('#target').trigger('click')
})

【讨论】：