Div 使用 WebGL 时不会触发鼠标悬停事件
Div mouseover events not firing when using WebGL
我正在使用一个单独的 div 来容纳一堆较小的 div，每个都用作文本标签。一切都应该位于 WebGL canvas.
之上
我希望这些标签 divs 触发 mouseover 和 mouseout 事件，但我已经尝试了很多不同的方法，但我仍然无法触发这些事件。
在 Chrome 中使用开发人员控制台，我可以看到这些函数已分配给 onmouseover 和 onmouseout 属性，但它们从未被调用。
这里有一个 codepen with full html, js and css that I forked from Damien Clarke 并且经过了非常轻微的修改。我希望将鼠标悬停在标签上时将内容打印到控制台，但没有任何反应
您的标签样式表中有 pointer-events: none;。因此他们没有事件。
您可以在正确的事件处理程序中使用 preventDefault 获得 pointer-events: none 的大部分效果。 （您可能需要修改您正在使用的标准 Three.js OrbitControls 以获得您想要的确切行为。）
我正在使用一个单独的 div 来容纳一堆较小的 div，每个都用作文本标签。一切都应该位于 WebGL canvas.
我希望这些标签 divs 触发 mouseover 和 mouseout 事件，但我已经尝试了很多不同的方法，但我仍然无法触发这些事件。
在 Chrome 中使用开发人员控制台，我可以看到这些函数已分配给 onmouseover 和 onmouseout 属性，但它们从未被调用。
这里有一个 codepen with full html, js and css that I forked from Damien Clarke 并且经过了非常轻微的修改。我希望将鼠标悬停在标签上时将内容打印到控制台，但没有任何反应
您的标签样式表中有 pointer-events: none;。因此他们没有事件。
您可以在正确的事件处理程序中使用 preventDefault 获得 pointer-events: none 的大部分效果。 （您可能需要修改您正在使用的标准 Three.js OrbitControls 以获得您想要的确切行为。）