css不常见属性之pointer-events的使用方法
发布时间:2018-09-27 15:46:38 作者:侯贝贝
我要评论
这篇文章主要介绍了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上的解释不太好理解。 网友叙帝利 给出了一种使用场景。
我这里还有一中使用场景是 当用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事件了。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了CSS pointer-events属性的使用,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下2018-07-24
本篇文章主要介绍了css3 pointer-events,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧2017-09-18CSS利用pointer-events防止重复点击的方法实例
这篇文章主要给大家介绍了关于CSS利用pointer-events防止重复点击的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者理解具有一定的参考学习价值,感兴趣的朋2017-08-07使用CSS的pointer-events属性实现鼠标穿透效果的神奇技巧
当pointer-events的值设置为none之后,浏览器将不会获得鼠标在当前位置的层上的点击事件,而造成鼠标穿透的效果!下面就来为大家展开讲解一下使用CSS的pointer-events属性实现2016-06-28- 本文主要介绍了CSS中的pointer-events属性的用法,十分的详细,有需要的小伙伴参考下。2015-02-26
CSS的pointer-events属性详细介绍(作用和注意事项)
现代浏览器里CSS的职责范围和JavaScript的越来越模糊分不清。比如CSS里-webkit-touch-callout属性在iOS里能禁止当用户点击时弹出气泡框2014-04-23- 是否曾经有过这样的经历:把一个元素置于另一个元素之上,而希望下面的那个元素成为可点击的?现在,利用css的pointer-events属性即可做到。2010-04-17




最新评论