畫布後面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屬性指針事件允許作者在什麼情況下（如果有的話）一個特定的圖形元素都可以成爲目標控制鼠標事件。