pointer-events

< css‎ | properties
Jump to: navigation, search

pointer-events

This article is Ready to Use.



Summary

The pointer-events property allows you to control whether an element can be the target for the pointing device (e.g, mouse, pen) events.

Overview table

Initial value auto
Applies to all elements
Inherited Yes
Media visual
Computed value the specified value
Animatable No
CSS Object Model Property pointerEvents

Syntax

  • pointer-events: all
  • pointer-events: auto
  • pointer-events: fill
  • pointer-events: none
  • pointer-events: painted
  • pointer-events: stroke
  • pointer-events: visible
  • pointer-events: visibleFill
  • pointer-events: visiblePainted
  • pointer-events: visibleStroke


Values

auto
In HTML/XML content, this value and the value all have the same effect. In SVG content, this value and the value visiblePainted have the same effect.
none
The element is never the target of pointer events, although pointer events may target its descendant elements if those descendants have the pointer-events set to some other value.
all
The element may be the target element for pointer events whenever the pointer is inside the CSS border edge of the element.
visiblePainted
For SVG only. The element can only be the target of a pointer event when the visibility property is set to visible and when the pointer is over the interior (i.e., 'fill') of the element or the perimeter (i.e., 'stroke') of the element, and the fill, stroke property is set to a value other than none.
visibleFill
For SVG only. The element can only be the target of a pointer event when the visibility property is set to visible and when the pointer is over the interior (i.e., fill) of the element.
visibleStroke
For SVG only. The element can only be the target of a pointer event when the visibility property is set to visible and when the pointer is over the perimeter (i.e., stroke) of the element.
visible
The element may be the target of pointer events when the visibility property is set to visible, and the pointer is over the contents, background, or border of the element (or in SVG, over either the interior (i.e., fill) or the perimeter (i.e., stroke) of the element).
painted
For SVG only. The element can only be the target of a pointer event when the pointer is over the interior (i.e., 'fill') of the element or the perimeter (i.e., 'stroke') of the element, and the fill, stroke property is set to a value other than none.
fill
For SVG only. The element can only be the target of a pointer event when the pointer is over the interior (i.e., fill) of the element.
stroke
For SVG only. The element can only be the target of a pointer event when the pointer is over the perimeter (i.e., stroke) of the element.


Compatibility

Do you think this data can be improved? You can ask to add by opening an issue or make a pull request.

Desktop

FeaturesChromeFirefoxInternet ExplorerOperaSafari
SVG support
1.0
Yes
?
Unknown
9.0
Yes
9.0
Yes
3.0
Yes
HTML/XML content
2.0
Yes
?
Unknown
11.0
Yes
15.0
Yes
4.0
Yes

Mobile

FeaturesAndroidFirefox MobileIE PhoneOpera MobileSafari Mobile
Basic support
?
Unknown
?
Unknown
?
Unknown
?
Unknown
?
Unknown


Examples

The first a element have the pointer-events property set to none, any pointer events (i.e., mouse over, click) do not happen.

HTML

<!DOCTYPE HTML>
<html lang="en-US">
<head>
  <meta charset="UTF-8">
  <title>Pointer-events example</title>
  <link href="pointer-events.css" type="text/css" rel="stylesheet">
</head>
<body>

  <p><a href="http://docs.webplatform.org" id="one">webplatform.org(none)</a></p>
  <p><a href="http://docs.webplatform.org" id="two">webplatform.org(all)</a></p>

</body>
</html>

CSS

#one{
  pointer-events: none;
}
#two{
  pointer-events: all;
}

View live exampleSVG demo of two intersecting circles

{see jsbin for the full source}

Notes

The pointer-events property used to be in the CSS 3 UI specification, but it has been postponed to CSS 4 due to many open issues.


Related specifications

Specification Status Related Changes
Scalable Vector Graphics (SVG) 1.1 (Second Edition) W3C Recommendation



Note: The pointer-events property used to be in the CSS 3 UI specification, but it has been postponed to CSS 4 due to many open issues.