美文网首页
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