div-设置不可点击

最新推荐文章于 2025-06-03 09:01:04 发布

原创最新推荐文章于 2025-06-03 09:01:04 发布 · 2.5k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#css

其它专栏收录该内容

18 篇文章

订阅专栏

pointer-events属性是一个指针属性，是用于控制在什么条件下特定的图形元素可以成为指针事件的目标。
pointer-events属性有很多值，但是对于浏览器来说，适用于HTML元素的只有三个值，其它的几个值都是针对SVG元素的（本身这个属性就来自于SVG技术，是一个SVG属性，并未在任何CSS规范中定义）。

.cantclick{
   pointer-events: none;
}

浏览器兼容性

属性	Chrome	Internet Explorer / Edge	Firefox	Safari	Opera
pointer-events	2.0	11.0	3.6	4.0	9.0

css语法

pointer-events: auto|none;

#属性值

属性值	描述
auto	默认值，设置该属性链接可以正常点击访问。
none	元素不能对鼠标事件做出反应
initial	设置该属性为它的默认值
inherit	从父元素继承该属性


visiblePainted

只适用于 SVG，元素只有在以下情况才会成为鼠标事件的目标：

visibility 属性值为 visible，且鼠标指针在元素内部，且 fill 属性指定了 none 之外的值
visibility 属性值为 visible，鼠标指针在元素边界上，且 stroke 属性指定了 none 之外的值
visibleFill

只适用于 SVG，只有在元素 visibility 属性值为 visible，且鼠标指针在元素内部时，元素才会成为鼠标事件的目标，fill 属性的值不影响事件处理。

visibleStroke

只适用于 SVG，只有在元素 visibility 属性值为 visible，且鼠标指针在元素边界时，元素才会成为鼠标事件的目标，stroke 属性的值不影响事件处理。

visible

只适用于 SVG，只有在元素 visibility 属性值为 visible，且鼠标指针在元素内部或边界时，元素才会成为鼠标事件的目标，fill 和 stroke 属性的值不影响事件处理。

painted

只适用于 SVG，元素只有在以下情况才会成为鼠标事件的目标：

鼠标指针在元素内部，且 fill 属性指定了 none 之外的值
鼠标指针在元素边界上，且 stroke 属性指定了 none 之外的值
visibility 属性的值不影响事件处理。

fill

只适用于 SVG，只有鼠标指针在元素内部时，元素才会成为鼠标事件的目标，fill 和 visibility 属性的值不影响事件处理。

stroke

只适用于 SVG，只有鼠标指针在元素边界上时，元素才会成为鼠标事件的目标，stroke 和 visibility 属性的值不影响事件处理。

all

只适用于 SVG，只有鼠标指针在元素内部或边界时，元素才会成为鼠标事件的目标，fill、stroke 和 visibility 属性的值不影响事件处理。