将 JavaScript 鼠标事件从一个元素传播到另一个元素？

Posted 2023-03-05

【中文标题】将 JavaScript 鼠标事件从一个元素传播到另一个元素？

【英文标题】：Propagate JavaScript mouse event(s) from one element to another element?

【发布时间】：2020-07-13 07:09:23

【问题描述】：

我正在使用 html div 元素作为 canvas 的工具提示，即当鼠标指针在 canvas 元素上移动时，div 将跟随鼠标的动作。

这行得通——几乎。工具顶部在鼠标指针的东南方向，当指针向东南方向移动时，指针可能会移动到 div 元素上，因此不再有鼠标移动事件到达 canvas .只有当鼠标进一步移动到div 之外时才会解决此问题，这会使div 以一种丑陋的方式跳跃以调整到该位置。

如何避免这些跳转并实现div 对鼠标“透明”？

通常的冒泡不起作用，因为canvas 不能容纳孩子；至少当我将孩子添加到 canvas 时，它们不会显示出来。

没有像 jQuery 这样的外部模块或任何使用/可用的模块。

【参考方案1】：

您应该可以在 div 上使用pointer-events: none;。

【讨论】：

似乎不起作用，el.pointerevents = "none"; 和 el.pointerEvents = "none"; 都不起作用，其中 el 是各自的 DOM div 元素。

...啊，明白了。它是 style 的元素，而不是元素本身：el.style.pointerEvents = "none"; 谢谢。

它确实链接到 CSS 文档。 ;)

如果我需要 div 上的 click 事件和画布上的 mousemove 事件怎么办？