CSS3 超實用屬性：pointer-events

weixin_34321977發表於2016-01-26
CSSS3

最近發現了一個叫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標籤。


1245223-404a2341b0cbffb8.png
效果圖

如果我們給上方的top層加上一個pointer-events屬性後：

.top {
  pointer-events: none;
}

我們就可以穿過top層去點選下面的a標籤了，此時這個top層如果有顏色的話相當於可看不可摸了（可念不可說哈哈）。

為什麼說這個屬性非常的實用呢，在許多網站上過節的時候頁面最上層會用canvas繪製的雨、雪花，避免這些懸浮物遮擋住頁面從而影響滑鼠點選，可以使用pointer-events=none屬性，讓這些上方的canvas不會遮擋滑鼠事件，讓滑鼠事件可以穿透上方的canvas來點選頁面。怎麼樣是不是很不錯，趕緊寫個demo來試試。

相關文章