css不常见属性之pointer-events

peixn 发布于2019-08-02 11:36 / 964人阅读

摘要：上介绍为属性指定在什么情况下如果有某个特定的图形元素可以成为鼠标事件的。属性值有其中默认属性为。当值为表示鼠标事件穿透该元素并且指定该元素下面的任何东西。网友叙帝利给出了一种使用场景。加上则不会响应事件了。

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上的解释不太好理解。网友叙帝利给出了一种使用场景。
我这里还有一中使用场景是当用div元素通过css样式模拟按钮时，可以使用 pointer-event: none 模拟button禁止点击。
比如:

// html

.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事件了。

云服务器 GPU云服务器 css属性访问CSS属性 position属性，css 获取CSS属性值

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/52990.html

css不常见属性之pointer-events

摘要：上介绍为属性指定在什么情况下如果有某个特定的图形元素可以成为鼠标事件的。属性值有其中默认属性为。当值为表示鼠标事件穿透该元素并且指定该元素下面的任何东西。网友叙帝利给出了一种使用场景。加上则不会响应事件了。 MDN 上介绍为 CSS 属性指定在什么情况下 (如果有) 某个特定的图形元素可以成为鼠标事件的 target。pointer-events 属性值有: /* Keyword va...

AndroidTraveler 2019-08-30 15:54 评论0 收藏0
CSS 黑魔法小技巧，让你少写不必要的JS，代码更优雅

摘要：利用用和来做表单即时校验需求让表单检验变得简单优雅，不需要写冗长的代码来校验设置样式丰富了表单元素，提供了类似等表单元素属性。不知细叶谁裁出，二月春风似剪刀。首先，你需要先了解一下渐变的使用技巧。之前不久，由于自己平时涉猎还算广泛，总结了一篇博客：这些JavaScript编程黑科技，装逼指南，高逼格代码，让你惊叹不已，没想到受到了大家的欢迎，有人希望能博主还能整理个 CSS 的一些黑...

Berwin 2019-08-01 17:42 评论0 收藏0
CSS 黑魔法小技巧，让你少写不必要的JS，代码更优雅

摘要：利用用和来做表单即时校验需求让表单检验变得简单优雅，不需要写冗长的代码来校验设置样式丰富了表单元素，提供了类似等表单元素属性。不知细叶谁裁出，二月春风似剪刀。首先，你需要先了解一下渐变的使用技巧。之前不久，由于自己平时涉猎还算广泛，总结了一篇博客：这些JavaScript编程黑科技，装逼指南，高逼格代码，让你惊叹不已，没想到受到了大家的欢迎，有人希望能博主还能整理个 CSS 的一些黑...

MASAILA 2019-08-21 16:46 评论0 收藏0
CSS 黑魔法小技巧，让你少写不必要的JS，代码更优雅

摘要：利用用和来做表单即时校验需求让表单检验变得简单优雅，不需要写冗长的代码来校验设置样式丰富了表单元素，提供了类似等表单元素属性。不知细叶谁裁出，二月春风似剪刀。首先，你需要先了解一下渐变的使用技巧。之前不久，由于自己平时涉猎还算广泛，总结了一篇博客：这些JavaScript编程黑科技，装逼指南，高逼格代码，让你惊叹不已，没想到受到了大家的欢迎，有人希望能博主还能整理个 CSS 的一些黑...

qqlcbb 2019-08-30 15:53 评论0 收藏0