The pointer-events
attribute is a presentation attribute that allows defining whether or when an element may be the target of a mouse event.
Note: As a presentation attribute pointer-events
can be used as a CSS property.
html,body,svg { height:100% }
<svg viewBox="0 0 20 10" xmlns="http://www.w3.org/2000/svg"> <!-- The circle will always intercept the mouse event. To change the color of the rect underneath you have to click outside the circle --> <rect x="0" y="0" height="10" width="10" fill="black" /> <circle cx="5" cy="5" r="4" fill="white" pointer-events="visiblePoint" /> <!-- The circle below will never catch a mouse event. The rect underneath will change color whether you are clicking on the circle or the rect itself --> <rect x="10" y="0" height="10" width="10" fill="black" /> <circle cx="15" cy="5" r="4" fill="white" pointer-events="none" /> </svg>
window.addEventListener('mouseup', (e) => { // Let's pick a random color between #000000 and #FFFFFF const color = Math.round(Math.random() * 0xFFFFFF) // Let's format the color to fit CSS requirements const fill = '#' + color.toString(16).padStart(6,'0') // Let's apply our color in the // element we actually clicked on e.target.style.fill = fill })
As a presentation attribute, it can be applied to any element but it is mostly relevant only on the following twenty-three elements: <a>
, <circle>
, <clipPath>
, <defs>
, <ellipse>
, <foreignObject>
, <g>
, <image>
, <line>
, <marker>
, <mask>
, <path>
, <pattern>
, <polygon>
, <polyline>
, <rect>
, <svg>
, <switch>
, <symbol>
, <text>
, <textPath>
, <tspan>
, <use>
Usage notes
Value | bounding-box | visiblePainted | visibleFill | visibleStroke | visible | painted | fill | stroke | all | none |
---|---|
Default value | visiblePainted |
Animatable | Yes |
For a detailed explanation of each possible value, have a look at the CSS pointer-events
documentation.
Browser compatibility
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
pointer-events | Chrome ? | Edge ? | Firefox ? | IE ? | Opera ? | Safari ? | WebView Android ? | Chrome Android ? | Firefox Android ? | Opera Android ? | Safari iOS ? | Samsung Internet Android ? |
Legend
- Compatibility unknown
- Compatibility unknown
Specification
Specification | Status | Comment |
---|---|---|
Scalable Vector Graphics (SVG) 2 The definition of 'pointer-events' in that specification. |
Candidate Recommendation | |
Scalable Vector Graphics (SVG) 1.1 (Second Edition) The definition of 'pointer-events' in that specification. |
Recommendation | Initial definition |