[CSS]使用CSS3 pointer-events解決z-index造成控制項失效之問題(含舊瀏覽器解決方案)
今天幫朋友解決一個問題，有時網頁的設計就好像一幅畫一樣，可能用一個大區塊當背景，而這個背景上有很多的不同形狀的小區塊擺在上方，大區塊在html的語言可能就叫做<body>、或者是<div>，而小區塊可能就是不同的html標籤，如<section>、<h1>、<p>…等等，而有時因為視覺設計很複雜，會將這些小區塊變成圖層的概念，設計成有先後順序，這時候就可以用CSS的z-index屬性，來讓圖層有高低順序，而順序比較低的如果有一些控制項，去點擊後是不會觸發的(因為多了一層擋住)，標題有點難下，以下這張圖可以說明：
問題解決
我寫了一個簡單範例：JsFiddle
這個範例是點擊無效的程式，而要修正這個問題，其實只要在藍色的div加入CSS3的屬性pointer-events即可：
pointer-events比較廣泛應用到html5的SVG裡面，此篇暫不探討，對其他標籤來講，有效的只有auto、none這兩個值，如果不加這個屬性，效果跟auto一樣，所以加上none屬性之後，就可觸發較低層級的click事件。
舊瀏覽器解決方式
好吧，寫網頁常常就要跟IE瀏覽器相容性做抗爭，因為CSS3在舊的瀏覽器支援度較差(支援度查詢)，所以我們常常要想另外一條路來完成。本例會使用JQuery來實做怎麼觸發這個click。完整程式碼如下：
html
<input type="submit" onclick="alert('ok');return false;" value="送出"/>
</div>
<div id="block">
<div id="content">
<h3>優先順序較高的圖層</h3>
</div>
</div>
CSS
{
position:fixed;
}
#block {
position:fixed;
z-index:50;
display:inline-block;
opacity:.80;
pointer-events:none; /* 解決無法觸發click事件 */
}
#content {
margin:auto;
width:300px;
background-color:#7db0f4;
border:1px solid #CCC;
text-align:center;
}
解決相容性的Script
$('#content').click(function(event) {
//先將這個div內容隱藏
$(this).hide();
//取得目前座標
var element = document.elementFromPoint(event.pageX, event.pageY);
//再將div內容顯示
$(this).show();
//判斷這個座標是否在Submit按鈕
if ($(element).is('input[type="submit"]')) {
//觸發click
$(element).trigger('click');
}
});
});
--
Reference
http://www.qianduan.net/css3-pointer-event-description.html