Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

JavaScript setting pointer-events

Tags:

javascript

css

I am trying to set pointer-events: none for a div through JavaScript, however the property is not being applied.

I have tried:

document.getElementById("div").setAttribute("pointer-events", "none"); 

And:

document.getElementById("div").style.pointer-events = "none"; 

But neither worked, any ideas?

like image 249
user1334130 Avatar asked May 11 '13 00:05

user1334130


People also ask

What are JavaScript pointer events?

Pointer events are DOM events that are fired for a pointing device. They are designed to create a single DOM event model to handle pointing input devices such as a mouse, pen/stylus or touch (such as one or more fingers). The pointer is a hardware-agnostic device that can target a specific set of screen coordinates.

How do I turn off pointer events?

Using pointer-events: none will disable all mouse interactions with that element. If you wanted to change the cursor property, you would have to apply the changes to the parent element. You could wrap the link with an element and add the cursor property to it.


2 Answers

Your first attempt failed because it was a CSS property and not an attribute (part of the style attribute).

Your second attempt failed because for some off reason, when making this API casing-like-this gets converted to camelCasingLikeThis . This is likely because the folks who built JavaScript and the folks who built CSS weren't very well coordinated.

The following should work:

document.getElementById("div").style.pointerEvents = "none"; 
like image 66
Benjamin Gruenbaum Avatar answered Oct 10 '22 05:10

Benjamin Gruenbaum


You can access style properties via Bracket notation like this:

document.getElementById("div").style['pointer-events'] = 'auto'; 

No need in camel case modification in this case.

like image 29
aleha Avatar answered Oct 10 '22 04:10

aleha