Impossible to set the rule "pointer-events" through JS or jQuery?

Question

I've to manipulate the interaction with an element in runtime, making it invisible and "no interactible".. The rule that can accomplish the second, is "pointer-events: none"

The problem is that it doesn't recognized from JS or jQuery... why?

Which browser do you need this work work on? pointer-events are not natively supported on any version of IE — andyb
– andyb, Commented Mar 8, 2013 at 13:53

jAndy · Accepted Answer · 2013-03-08 13:50:24Z

21

I don't think I understand the question, but (using jQuery)

$( document.body ).css( 'pointer-events', 'none' );

will work just fine for supporting browsers (ignoring any pointer event). However, if you remove / hide the element, pointer events will of course also no longer work if you hide it by

display: none

answered Mar 8, 2013 at 13:50

jAndy

237k57 gold badges313 silver badges363 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Sonia Over a year ago

In jQuery i've used this syntax: $("#scrittainfo").css({pointer-events:"0"}) and it didn't work.. instead using it for manimupale the "opacity", all works fine.. For what reason?

jAndy Over a year ago

@AnnaLica "0" is no valid value for pointer-events. Set it to none instead.

Sonia Over a year ago

It's the same thing, too using "none".. In the project i've regularly wrote "none", i've do a mistake to post it there

1j01 Over a year ago

@Sonia .css({pointer-events:"0"}) is not valid syntax because you can't have a - in a property without quoting it, like .css({"pointer-events":"0"}) But since you probably don't want to quote every property just to make it consistent with the ones that require quoting because of dashes, you can instead use camelCased properties which jQuery considers equivalent: .css({pointerEvents:"0"}) Or you can use their alternate syntax which only uses strings: .css("pointer-events", "0")

frodo2975 · Accepted Answer · 2016-04-28 22:04:43Z

8

You can use the css pointer-events: none; to allow events to go through. Also, like 1j01 commented, jquery will accept camelCase to get around the problem of dashes in the name:

$('.my-class').css({pointerEvents: "none"})

answered Apr 28, 2016 at 22:04

frodo2975

12k5 gold badges39 silver badges51 bronze badges

Collectives™ on Stack Overflow

Impossible to set the rule "pointer-events" through JS or jQuery?

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related