css不普遍特性之pointer

日期:2021-03-17 类型:科技新闻 

关键词:网页设计,移动端网页设计,大一网页设计作业成品,网页编辑软件,网页在线编辑

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的值,说1说 none 的应用情景。 mdn上的解释不大好了解。 网友叙帝利 得出了1种应用情景。

我这里也有1中应用情景是 当用div元素根据css款式仿真模拟按钮时,可使用 pointer-event: none 仿真模拟button严禁点一下。

例如:

// html
<div class="point" onclick="alert('ok')递交申请办理</div>
.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;
}

此时该div的模样,假如不设定pointer-events: none; 只是模样不能点一下,点一下還是会开启恶性事件回应的。 再加则不容易回应click恶性事件了。

以上便是本文的所有內容,期待对大伙儿的学习培训有一定的协助,也期待大伙儿多多适用脚本制作之家。

上一篇:企业网站建设 > 自适应网站 返回下一篇:没有了