当前位置: 首页 > Web前端 > CSS

Pointer-events

时间:2023-03-31 00:47:33 CSS

MDN,css的一个不常见属性,作为CSS属性引入,用于指定在什么情况下(如果有的话)特定图形元素可以成为鼠标事件的目标。pointer-events属性值有:/*关键字值*/pointer-events:auto;pointer-events:none;pointer-events:visiblePainted;/*仅限SVG*/pointer-events:visibleFill;/*仅限SVG*/pointer-events:visibleStroke;/*仅限SVG*/pointer-events:visible;/*仅限SVG*/pointer-events:painted;/*仅限SVG*/pointer-events:fill;/*仅限SVG*/pointer-events:stroke;/*仅限SVG*/pointer-events:all;/*仅限SVG*//*全局值*/pointer-events:inherit;pointer-events:initial;pointer-events:unset;默认属性为auto。none值表示鼠标事件“看穿”元素并指定元素“下方”的任何内容。使用场景抛开只适用于svg的value,说说none的使用场景。mdn上的解释不太好理解。网友徐帝立给出了一个使用场景。我这里还有一个使用场景是在通过css样式使用div元素模拟按钮时,可以使用pointer-event:none来模拟按钮禁止点击。例如://html.point{width:1.8rem;height:.44rem;margin:0auto;margin-top:0.8rem;text-align:center;line-height:.44rem;border-radius:22px;color:#fff;background-color:rgba(67,76,94,.43);当div看起来像的时候,如果你没有设置pointer-events:none;但是外观是不可点击的,点击还是会触发事件响应。另外,点击事件不会被响应。