The pointer-events attribute allows us to define whether or when an element may be the target of a mouse event. It is applied on the following elements: <a>, <circle>, <clipPath>, <defs>, <ellipse>, <foreignObject>, <g>, <image>, <line>, <marker>, <mask>, <path>, <pattern>, <polygon>, <polyline>, <rect>, <svg>, <switch>, <symbol>, <text>, <textPath>, <tspan>, <use>.
Syntax:
pointer-events = bounding-box | visiblePainted | visibleFill |
visibleStroke | visible | painted | fill |
stroke | all | noneAttribute Values: The pointer-events attribute accepts the values mentioned above and described below:
- auto: It is used to describe that an element must react to pointer events.
- none: It is used to describe that an element does not react to pointer-events.
- visiblePainted: This value can only be the target of a pointer event when the mouse cursor is over the interior or the perimeter of the element and the fill or stroke property is set to a value other than none.
- visibleFill: This value can only be the target of a pointer event when a mouse cursor is over the interior of the element.
- visibleStroke: This value can only be the target of a pointer event when the mouse cursor is over the perimeter of the element.
- visible: This value can only be the target of a pointer event when the mouse cursor is over either the interior or the perimeter of the element.
- painted: This value can only be the target of a pointer event when the mouse cursor is over the interior or the perimeter of the element and the fill or stroke property is set to a value other than none.
- fill: This value can only be the target of a pointer event when the pointer is over the interior of the element.
- stroke: This value can only be the target of a pointer event when the pointer is over the perimeter of the element.
- all: This value can only be the target of a pointer event when the pointer is over the interior or the perimeter of the element.
Below examples illustrate the use of pointer-events attribute.
Example 1:
HTML
<!DOCTYPE html> <html>
<body>
<div style="color: green;">
<h2>
GeeksforGeeks
</h2>
<svg viewBox="0 0 100 10" <rect x="3" y="0" height="10" width="10" fill="green" />
<ellipse cx="8" cy="5" rx="5" ry="4" fill="black" pointer-events="visiblePainted" />
</svg>
</div>
<script>
window.addEventListener(
'mouseup', (e) => {
let geekColor =
Math.round(Math.random() *
0xFFFFFF)
let fill =
'#' + geekColor.toString(16).
padStart(5, '0')
e.target.style.fill = fill
});
</script>
</body>
</html>
|
Output:
Example 2:
HTML
<!DOCTYPE html> <html>
<body>
<div style="color: green;">
<h2>
GeeksforGeeks
</h2>
<svg viewBox="0 0 100 10" <rect x="3" y="0" height="10" width="10" fill="green" />
<ellipse cx="8" cy="5" rx="5" ry="4" fill="black" pointer-events="none" />
</svg>
</div>
<script>
window.addEventListener(
'mouseup', (e) => {
let geekColor =
Math.round(Math.random()
* 0xFFFFFF)
let fill =
'#' + geekColor.toString(16).
padStart(6, '0')
e.target.style.fill = fill
});
</script>
</body>
</html>
|
Output: