pointer-events · Properties · CSS

The pointer-events CSS property specifies under what circumstances a given element can be the target element for a pointer event.

Syntax

CSS

pointer-events: value;

JS

object.style.pointerEvents = "value";

Values

<'pointer-events'> = bounding-box | visiblePainted | visibleFill | visibleStroke | visible | painted | fill | stroke | all | none

bounding-box

The given element must be a target element for pointer events when the pointer is over the bounding box of the element.

visiblePainted

The given element can be the target element for pointer events when the visibility property is set to visible and when the pointer is over a "painted" area. The pointer is over a painted area if it is over the interior (i.e., fill) of the element and the fill property has an actual value other than none or it is over the perimeter (i.e., stroke) of the element and the stroke property is set to a value other than none.

visibleFill

The given element can be the target element for pointer events when the visibility property is set to visible and when the pointer is over the interior (i.e., fill) of the element. The value of the fill property does not affect event processing.

visibleStroke

The given element can be the target element for pointer events when the visibility property is set to visible and when the pointer is over the perimeter (i.e., stroke) of the element. The value of the stroke property does not affect event processing.

visible

The given element can be the target element for pointer events when the visibility property is set to visible and the pointer is over either the interior (i.e., fill) or the perimeter (i.e., stroke) of the element. The values of the fill and stroke do not affect event processing.

painted

The given element can be the target element for pointer events when the pointer is over a "painted" area. The pointer is over a painted area if it is over the interior (i.e., fill) of the element and the fill property has an actual value other than none or it is over the perimeter (i.e., stroke) of the element and the stroke property has an actual value other than none. The value of the visibility property does not affect event processing.

fill

The given element can be the target element for pointer events when the pointer is over the interior (i.e., fill) of the element. The values of the fill and visibility properties do not affect event processing.

stroke

The given element can be the target element for pointer events when the pointer is over the perimeter (i.e., stroke) of the element. The values of the stroke and visibility properties do not affect event processing.

all

The given element can be the target element for pointer events whenever the pointer is over either the interior (i.e., fill) or the perimeter (i.e., stroke) of the element. The values of the fill, stroke and visibility properties do not affect event processing.

none

The given element does not receive pointer events.

Initial

visiblePainted

Examples

1 · all

2 · bounding-box

3 · fill

4 · none

5 · painted

6 · stroke

7 · visible

8 · visibleFill

9 · visiblePainted

10 · visibleStroke

11 · JS · Inline

<!doctype html>
<html>
<head>
    <style>
        circle
        {
            fill: yellow;
            stroke: red;
            stroke-width: 50px;
        }
        circle:nth-of-type(2)
        {
            visibility: hidden;
        }
        text
        {
            dominant-baseline: middle;
            font-size: 50px;
            text-anchor: middle;
        }
    </style>
</head>
<body>
    <button onmouseover="myfunction(innerHTML)">initial</button>
    <button onmouseover="myfunction(innerHTML)">all</button>
    <button onmouseover="myfunction(innerHTML)">bounding-box</button>
    <button onmouseover="myfunction(innerHTML)">fill</button>
    <button onmouseover="myfunction(innerHTML)">none</button>
    <button onmouseover="myfunction(innerHTML)">painted</button>
    <button onmouseover="myfunction(innerHTML)">stroke</button>
    <button onmouseover="myfunction(innerHTML)">visible</button>
    <button onmouseover="myfunction(innerHTML)">visibleFill</button>
    <button onmouseover="myfunction(innerHTML)">visiblePainted</button>
    <button onmouseover="myfunction(innerHTML)">visibleStroke</button>
    <svg height="calc(100vh - 41px)" width="100%">
        <a href="/">
            <circle cx="0%" cy="50%" r="50vh"/>
            <circle cx="100%" cy="50%" r="50vh"/>
        </a>
        <text x="50%" y="50%">pointer-events</text>
    </svg>
    <script>
        function myfunction(myparameter)
        {
            const myelements = document.querySelectorAll("circle");
            for(let myelement of myelements)
            {
                myelement.style.pointerEvents = myparameter;
            }
        }
    </script>
</body>
</html>

12 · JS · Internal

<!doctype html>
<html>
<head>
    <style>
        circle
        {
            fill: yellow;
            stroke: red;
            stroke-width: 50px;
        }
        circle:nth-of-type(2)
        {
            visibility: hidden;
        }
        text
        {
            dominant-baseline: middle;
            font-size: 50px;
            text-anchor: middle;
        }
    </style>
</head>
<body>
    <button>initial</button>
    <button>all</button>
    <button>bounding-box</button>
    <button>fill</button>
    <button>none</button>
    <button>painted</button>
    <button>stroke</button>
    <button>visible</button>
    <button>visibleFill</button>
    <button>visiblePainted</button>
    <button>visibleStroke</button>
    <svg height="calc(100vh - 41px)" width="100%">
        <a href="/">
            <circle cx="0%" cy="50%" r="50vh"/>
            <circle cx="100%" cy="50%" r="50vh"/>
        </a>
        <text x="50%" y="50%">pointer-events</text>
    </svg>
    <script>
        function myfunction(myparameter)
        {
            const myelements = document.querySelectorAll("circle");
            for(let myelement of myelements)
            {
                myelement.style.pointerEvents = myparameter;
            }
        }
        const myelements = document.querySelectorAll("button");
        for(let myelement of myelements)
        {
            myelement.addEventListener("mouseover", function(){myfunction(myelement.innerHTML)});
        }
    </script>
</body>
</html>