当前位置:Web前端 > > 正文

js里咋样设置css里面的属性(css不常见属性之pointer-events的使用方法)

时间:2022-04-02 02:31:56类别:Web前端

js里咋样设置css里面的属性

css不常见属性之pointer-events的使用方法

MDN 上介绍为 CSS 属性指定在什么情况下 (如果有) 某个特定的图形元素可以成为鼠标事件的 target。

pointer-events 属性值有:

  • /* Keyword values */
    pointer-events: auto;
    pointer-events: none;
    pointer-events: visiblePainted; /* SVG only */
    pointer-events: visibleFill;    /* SVG only */
    pointer-events: visibleStroke;  /* SVG only */
    pointer-events: visible;        /* SVG only */
    pointer-events: painted;        /* SVG only */
    pointer-events: fill;           /* SVG only */
    pointer-events: stroke;         /* SVG only */
    pointer-events: all;            /* SVG only */
    
    /* Global values */
    pointer-events: inherit;
    pointer-events: initial;
    pointer-events: unset;
    
    
    
  • 其中默认属性为 auto。 当值为none表示鼠标事件“穿透”该元素并且指定该元素“下面”的任何东西。

    使用场景

    抛却只适用于svg的值,说一说 none 的使用场景。 mdn上的解释不太好理解。 网友叙帝利 给出了一种使用场景。

    我这里还有一中使用场景是 当用li元素通过css样式模拟按钮时,可以使用 pointer-event: none 模拟button禁止点击。

    比如:

  • // html
    <li class="point" onclick="alert('ok')提交申请</li>
    .point {
        width: 1.8rem;
        height: .44rem;
        margin: 0 auto;
        margin-top: 0.8rem;
        text-align: center;
        line-height: .44rem;
        border-radius: 22px;
        color: #fff;
        background-color: rgba(67,76,94,.43);
        pointer-events: none;
    }
    
    
  • 此时该li的样子,如果不设置pointer-events: none; 只是样子不可点击,点击还是会触发事件响应的。 加上则不会响应click事件了。

    js里咋样设置css里面的属性(css不常见属性之pointer-events的使用方法)

    以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持开心学习网。

    标签:
    上一篇下一篇

    猜您喜欢

    热门推荐