画布后面div问题

Question

我使用JavaScript绘制画布内，但我得到这个奇怪的问题，我不能“背后”文本的div，所以当我悬停在div，它停止绘图，并开始每当我停留在div和线开始继续我徘徊的地方，但它呈现在div后面的怪异线，而不是像模糊样式的线。

在这一点上，我想以我可以在文本背后绘制的方式来解决这个问题。

这里是我的代码：(https://codepen.io/Zdendaaa/pen/yXWOmQ)

任何帮助吗？谢谢！

Answer 1

您可以按照其他答案中所述添加pointer-events: none，但这只是一个很好的解决方案，如果您确定不需要该特定元素上的任何其他事件。例如，如果你想在你的内容div中放置一个应该有悬停效果的图像或者让我们说任何类型的链接，你就会再次遇到同样的问题。

更好的方法可能只是将画布和内容封装在另一个div容器中，并将您的mouseover侦听器添加到此包装元素中。

在这种情况下，您不必禁止特定元素上的某些事件。

我编辑你的笔有点用一个例子：https://codepen.io/anon/pen/YQbGKL

Answer 2

您的内容的div添加

pointer-events: none;

根据MDN： https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events CSS属性指针事件允许作者在什么情况下（如果有的话）一个特定的图形元素都可以成为目标控制鼠标事件。