Deactivating The Canvas Element

Question

Deactivating The Canvas Element

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.

jquery html css canvas three.js

Answer 1

Answer №1

Here is a solution for you:

$('.submenu').on('mousedown', function (e) { e.preventDefault(); e.stopPropagation(); });

Answer 2

Here is a solution for you:

$('.submenu').on('mousedown', function (e) { e.preventDefault(); e.stopPropagation(); });

Answer 3

Answer №2

After some experimentation, I came up with a clever solution. By introducing a boolean variable to the code mentioned earlier and utilizing it as a way to determine whether the focus is on the div or canvas element, I can now incorporate it into event handlers to control the operation flow. It may not be exactly what I initially planned, but it's proving to be quite effective.

Answer 4

After some experimentation, I came up with a clever solution. By introducing a boolean variable to the code mentioned earlier and utilizing it as a way to determine whether the focus is on the div or canvas element, I can now incorporate it into event handlers to control the operation flow. It may not be exactly what I initially planned, but it's proving to be quite effective.

Deactivating The Canvas Element

Answer №1

Answer №2

Similar questions

Removing the Login button from the layout page after the user has logged in can be achieved by

Remove the footer from the main section

Is the "sizes" attribute of the "picture" element functional in Chrome when it comes to <source>?

Getting data sent via Ajax and jQuery through window.location.href in a new controller in CodeIgniter

Is utilizing unregistered HTML elements for semantic purposes considered poor practice?

Adding style using CSS to a dynamically generated table row in Vue.js

What is the best way to position my two icons next to each other in the footer of my React application?

Using javascript, add text to the beginning of a form before it is submitted

Why is only one tab functioning on BS3?

What is the best way to generate this arc using CSS3?

Having trouble achieving the desired effect with inline block

Steps for incorporating error messages in jQuery Validator:1. Begin by including the

When applying styles in Polymer, it's important to take into account the width and height

Does anyone know if there is a .Net jQuery wrapper available?

How can I retrieve the value from an input form using jQuery if it returns null?

In PHP, the response from Ajax can also serve as a class name

Click the link to find the JSON node that corresponds to the onclick event

What is the best way to implement padding for two DIVS on a screen utilizing VH and VW units to ensure they fill up the

Hide the navigation menu when a page link is selected

Dynamic population of dropdown not working as expected