pointer-events的值基本针对SVG,不常用因此不做说明。
重点说明pointer-events:none;的用法,在开发当中较为常用。
pointer-events:none; 当某元素的pointer-events属性设置为none时,该元素的鼠标事件将失效,例如点击事件,双击事件等都不会被捕获到。
开发场景:开发过程中某些按钮需要设置权限,无权限时则不可点击,这个时候就可以使用pointer-events:none;
a标签设置了pointer-events:none; 即便href有地址也不会进行跳转。
const disabled = true;
<Button className={disabled ? 'disabled' : null}>点击</Button>
<style>
.disabled {
pointer-events: none;
// 设置pointer-events: none;再设置cursor是没有效果的
}
</style>
参考文档:https://developer.mozilla.org/zh-CN/docs/Web/CSS/pointer-events