The CSS3 Basic UI module defines pointer-events as:
The
pointer-eventsproperty allows authors to control whether or when an element may be the target of user pointing device (pointer, e.g. mouse) events. This property is used to specify under which circumstance (if any) a pointer event should go âthroughâ an element and target whatever is âunderneathâ that element instead. This also applies to other âhit testingâ behaviors such as dynamic pseudo-classes (:hover, :active, :focus), hyperlinks, and Document.elementFromPoint().
The property was originally SVG-only, but eventually browsers and the W3C adopted a more limited version for HTML elements too.
It can be used in many use cases that werenât possible before (or the solution was overly complicated), one of them being to create custom-looking <select> drop downs, by overlaying an element over the native drop down arrow (to create the custom one) and disallowing pointer events on it. Hereâs a quick example:
-webkit-appearance: none was needed in Webkit to turn off the native OSX appearance (in OSX and maybe Safari on Windows, I didnât test that). However, since that also removes the native drop down arrow, our custom arrow now obscures part of the text, so we had to add a 30px padding-right to the select element, only in Webkit. You can easily detect if pointer-events is supported via JS and only apply this it if it is (eg by adding or removing a class from the body element):
if(!(âpointerEventsâ in document.body.style)) { ⌠}
However, there is one caveat in this: Opera does include pointerEvents in HTML elements as well, but it does not actually support the property on HTML. Thereâs a more elaborate feature detection script here as a Modernizr plugin (but the code is quite short, so you can adapt it to your needs).
Also, donât try to replicate the behavior in JavaScript for browsers that donât support this: itâs impossible to open a <select> drop down with JavaScript. Or, to put it differently, if you manage to do it, youâll probably be the first to. Everything I could think of failed and I spent hours yesterday searching for a way, but no avail.