1. 程式人生 > >CSS3 超實用屬性:pointer-events阻止使用者的點選動作產生任何效果

CSS3 超實用屬性:pointer-events阻止使用者的點選動作產生任何效果

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來點選頁面.