美文网首页
css3 pointer-events

css3 pointer-events

作者: chenjieyi | 来源:发表于2019-04-22 17:33 被阅读0次

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>
disabled 禁用状态
正常可点击状态

参考文档:https://developer.mozilla.org/zh-CN/docs/Web/CSS/pointer-events

相关文章

网友评论

      本文标题:css3 pointer-events

      本文链接:https://www.haomeiwen.com/subject/cnrugqtx.html