Javascript 如何允许单击通过div，但仍然对悬停作出反应？

假设我有

divA

部分重叠

divB

。我如何允许单击

divA

传递到

divB

，但在将鼠标悬停在

divA

上时仍会触发

hover

我知道

指针事件：无

这会使单击通过，但也会阻止悬停

我也尝试了下面的方法，但它不允许点击失败

$(document).on('click', '.feedback-helper', function(e){
        e.preventDefault();
})

想象一下div之间的关系，如：

原因如下（读作：“让我们避免X Y问题”）：

我正在努力实现

要了解问题，请执行以下操作：

• 查看
• 单击右下角的“反馈”按钮
• 在屏幕上绘制一个框以突出显示一个部分
• 点击“黑屏”按钮
• 尝试在第一个框内绘制一个框由于单击被第一个框阻止，因此无法绘制

我需要允许在突出显示的区域上绘制遮光框，但如果我设置

指针事件：无我将丢失这些元素上的其他悬停功能

欢迎所有解决方案
您可以获得覆盖元素的单击事件，以启动基础元素的单击事件

本机JS示例：


document.getElementById（'divA'）.addEventListener（'click'，function（）{
警报（“单击A”）；
});
document.getElementById（'divB'）。addEventListener（'click'，function（）{
var event=document.createEvent（'HTMLEvents'）；
initEvent（'click'，true，false）；
document.getElementById（'divA'）.dispatchEvent（事件）；
});
div{
光标：指针；
边框：1px纯黑；
}
#女主角{
高度：300px；
宽度：300px；
背景：白烟；
}
#女主角{
高度：30px；
宽度：30px；
背景：灰色；
位置：绝对位置；
左：100px；
顶部：100px；
}
#女主角：悬停{
背景：绿色；
}

我查看了您的示例页面，如果您在data type=“highlight”上设置了一个稍微低一点的z-index，可以解决这个问题，请尝试将z-index设置为29990，而不是当前的30000。这应该允许您以突出显示的反馈区域为目标，并将其覆盖在遮光元素上。
另一个选项是使用伪元素。也许这会满足你的需要


$（'toggleBlack'）。在（'click'，function（）上{
$（'#divA'）。toggleClass（'hidden'）；
});
div{
边框：1px纯黑；
}
#女主角{
背景：白烟；
位置：相对位置；
}
#女主角。隐藏：以前{
位置：绝对位置；
内容：''；
排名：0；
左：0；
右：0；
底部：0；
背景：红色；
}

隐藏后高亮显示文本并剪切/复制/拖动




切换隐藏
您是如何收听创建“黑屏”块的事件的？也许我们可以在那里做些改变？（例如，将此事件也应用于长方体元素）。编辑：也试着阅读这篇文章，如何设置一个页面级的点击事件处理程序（window.addEventListener（“点击”，函数（evt）{…}）在这个函数中，检查event.target，看看到底是什么对象启动了这个事件，并做出相应的反应？@Ness我会查看一下插件的源代码，看看它使用的是canvas，我对此知之甚少，所以我对它的任何更改都犹豫不决there@ScottMarcus我希望有一个更直接的解决办法，但我会把它记在心里你为什么不这样做呢哇，我完全认为这与插件的画布方面有关，一个看右上方的
z-index
实际上，这并不能完全解决这个问题，悬停没有正确注册，看，如果你看原始的，当你悬停在突出显示的框上时，右上方会弹出一个x来删除突出显示。如果我们更改z顺序，这将不再起作用。我明白你的意思，只是看了一下示例页面。这是一个棘手的问题！我正在对你的示例页面进行黑客攻击，如果我发现了什么，我会让你知道的！泰，我现在自己正在深入研究插件，肯定不会简单