码迷,mamicode.com
首页 > Web开发 > 详细

【转】CSS3 超实用属性:pointer-events

时间:2018-04-23 15:41:14      阅读:192      评论:0      收藏:0      [点我收藏+]

标签:授权   XML   round   为什么   asc   selector   cimage   css   htm   

最近发现了一个叫pointer-events的css属性,是一个与javascript有关的属性,pointer-events直译为指针事件,当把值设置为none后,他有如下相关特性。

  1. 阻止用户的点击动作产生任何效果
  2. 阻止缺省鼠标指针的显示
  3. 阻止CSS里的hover和active状态的变化触发事件
  4. 阻止JavaScript点击动作触发的事件

一条CSS可以做许多事情是不是很神奇,我们在看一下兼容性情况如何。
IE  11+
Firefox  3.6+
Chrome 4.0+
Safari  6.0
Opera  15.0
iOS Safari 6.0
Android Browser 2.1+
Android Chrome 18.0+

看下实例,具体是怎么回事。html代码:

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<ul>
    <li><a href="https://www.baidu.com/">百度</a></li>
    <li><a href="http://example.com">一个不能点击的链接</a></li>
</ul>
</body>
</html>

css代码:

<style>
  a[href="http://example.com"] {
      pointer-events: none;
  }
</style>

第二个a标签不仅无法被点击,而且没有鼠标手形样式。再看一个例子。

html代码:

<!DOCTYPE html>
<html>
<head>
</head>
<body>
    <!-- 下方div -->
    <div class="bottom">
        <a href="www.baidu.com">bottom-百度</a>
    </div>
    <!-- 上方div -->
    <div class="top"></div>
</body>
</html>

CSS代码:

<style>
.bottom {
    background: yellow;
    width: 100px;
    height: 100px;
}
.top {
    width: 100px;
    height: 100px;
    position: absolute;
    top: 0;
    left: 0;
}
</style>

此时由于top的div位于a标签之上,无法点击到a标签。


 
技术分享图片
效果图

如果我们给上方的top层加上一个pointer-events属性后:

.top {
  pointer-events: none;
}

我们就可以穿过top层去点击下面的a标签了,此时这个top层如果有颜色的话相当于可看不可摸了(可念不可说哈哈)。

为什么说这个属性非常的实用呢,在许多网站上过节的时候页面最上层会用canvas绘制的雨、雪花,避免这些悬浮物遮挡住页面从而影响鼠标点击,可以使用pointer-events=none属性,让这些上方的canvas不会遮挡鼠标事件,让鼠标事件可以穿透上方的canvas来点击页面。怎么样是不是很不错,赶紧写个demo来试试。



作者:Rin阳
链接:https://www.jianshu.com/p/3eba945fc19e
來源:简书
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

【转】CSS3 超实用属性:pointer-events

标签:授权   XML   round   为什么   asc   selector   cimage   css   htm   

原文地址:https://www.cnblogs.com/HAVENT/p/8918800.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!