I am currently working on a project that involves using Three.js alongside a menu placed above the canvas element, which is essentially a regular div. However, I have encountered an issue where the canvas element still registers input when interacting with the div through clicking or scrolling. Is there a way to temporarily disable all mouse interactions with the canvas?
So far, I have tried the following approach:
$('.submenu').on("mouseenter", function(event){
$("#canvas").css("pointer-events", "none");
});
$('.submenu').on("mouseleave", function(event){
$("#canvas").css("pointer-events", "");
});
Unfortunately, this solution does not seem to be effective in resolving the issue. I have also spent a considerable amount of time searching for alternative solutions, but to no avail.
Thank you in advance for any assistance provided.