CSS3 pointer-events

admin發表於2018-08-17
CSSS3

很多CSS3的功能非常類似於JavaScript，pointer-events屬性也體現了這一點。

語法結構：

[CSS] 純文字檢視 複製程式碼
pointer-events:  auto | none | visiblePainted | visibleFill | visibleStroke | visible | painted | fill | stroke | all | inherit

屬性有很多屬性值，但當前只有auto和none對普通web頁面有效，其他的屬性值都是針對SVG的。

pointer-events屬性具有如下功能：

（1）.阻止使用者的點選動作產生任何效果。

（2）.阻止預設滑鼠指標的顯示。

（3）.阻止CSS裡的hover和active狀態的變化觸發事件。

（4）.阻止JavaScript點選動作觸發的事件。

程式碼例項：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style>
a{
  text-decoration:none;
  color:green;
  pointer-events:none;
}
</style>
</head>
<body>
<a href="http://www.softwhy.com">螞蟻部落</a>
<div>滑鼠放在連結上檢視效果</div>
</body>
</html>

預設狀態下，滑鼠懸浮，指標會變成小手形狀，如果將pointer-events設定為none就不會有此效果。

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style>
#box{
  width:300px;
  height:100px;
  margin:0px auto;
  position:relative;
  text-align:center;
  line-height:100px;
}
#box .mark{
  width:300px;
  height:100px;
  background:#CCC;
  opacity:0.3;
  filter:alpha(opacity=30);
  position:absolute;
  top:0px;
  left:0px;
  z-index:100;
}
a{
  text-decoration:none;
  color:green;
}
</style>
</head>
<body>
<div id="box">
  <a href="http://www.softwhy.com">螞蟻部落</a>
  <div class="mark"></div>
</div>
</body>
</html>

上面的程式碼中，由於連結<a>元素被絕對定位的div元素所覆蓋，它就失去了任何點選效果。

程式碼修改如下:

[CSS] 純文字檢視 複製程式碼
#box .mark{
  width:300px;
  height:100px;
  background:#CCC;
  opacity:0.3;
  filter:alpha(opacity=30);
  position:absolute;
  top:0px;
  left:0px;
  z-index:100;
  pointer-events:none;
}

只要給絕對定位的div元素新增pointer-events:none即可解除它預設的限制，能夠繼續點選連結。

同樣對於事件處理函式也是如此，如果給連結a繫結click事件處理函式，預設情況下，如果被絕對定位元素覆蓋，那麼它就不能夠點選了，但是將覆蓋元素的pointer-events屬性設定為none即可實現點選觸發事件功能。

相關文章