pointer-events属性

2023-08-07 17:14:52

pointer-events的风格更像JavaScript，它能够：

1.阻止用户的点击动作产生任何效果
.阻止缺省鼠标指针的显示
3.阻止CSS里的hover和active状态的变化触发事件
4.阻止JavaScript点击动作触发的事件

一些需要注意的关于pointer-events的事项：

1.子元素可以声明pointer-events来解禁父元素的阻止鼠标事件限制。
2.如果你对一个元素设置了click事件监听器，然后你移除了pointer-events样式声明，或把它的值改变为auto，监听器会重新生效。基本上，监听器会遵守pointer-events的设定。

语法：

默认值：auto

适用于：所有元素

继承性：有

动画性：否

计算值：指定值

取值：

auto：与pointer-events属性未指定时的表现效果相同。在svg内容上与visiblepainted值相同

none：元素永远不会成为鼠标事件的target。但是，当其后代元素的pointer-events属性指定其他值时，鼠标事件可以指向后代元素，在这种情况下，鼠标事件将在捕获或冒泡阶触发父元素的事件侦听器。其他值只能应用在SVG上。

说明：

设置或检索在何时成为属性事件的target。

使用pointer-events来阻止元素成为鼠标事件目标不一定意味着元素上的事件侦听器永不会触发。如果元素后代明确指定了pointer-events属性并允许其成为鼠标事件的目标，那么指向该元素的任何事件在事件传播过程中都将通过父元素，并以适当的方式触发其上的事件侦听器。当然位于屏幕上在父元素上但不在后代元素上的鼠标活动都不会被父元素和后代元素捕获（将会穿过父元素而指向位于其下面的元素）。
对应的脚本特性为pointerEvents。

兼容性：

示例：

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

    <title></title>

    <meta charset="utf-8" />

    <style>

        #divTwo {

            background: red;

            width: 100%;

            height: 100%;

            position: fixed;

            z-index: 1;

            top: 0px;

            left: 0px;

            opacity: 0.3;

            /*设置当前元素不参与鼠标事件*/

            pointer-events:none;

        }

    </style>

</head>

<body>

    <div id="divOne">

        <a href="canvas1.html">连接1</a>

        <br /><br />

        <a href="pointer-events.html">连接2</a>

    </div>

    <div id="divTwo"></div>

</body>

</html>

结果：

码农公寓

相关文章