[CSS]使用CSS3 pointer-events解決z-index造成控制項失效之問題(含舊瀏覽器解決方案)

今天幫朋友解決一個問題，有時網頁的設計就好像一幅畫一樣，可能用一個大區塊當背景，而這個背景上有很多的不同形狀的小區塊擺在上方，大區塊在html的語言可能就叫做<body>、或者是<div>，而小區塊可能就是不同的html標籤，如<section>、<h1>、<p>…等等，而有時因為視覺設計很複雜，會將這些小區塊變成圖層的概念，設計成有先後順序，這時候就可以用CSS的z-index屬性，來讓圖層有高低順序，而順序比較低的如果有一些控制項，去點擊後是不會觸發的(因為多了一層擋住)，標題有點難下，以下這張圖可以說明：

layers-steps1

圖片來源

問題解決

我寫了一個簡單範例：JsFiddle
這個範例是點擊無效的程式，而要修正這個問題，其實只要在藍色的div加入CSS3的屬性pointer-events即可：
pointer-events比較廣泛應用到html5的SVG裡面，此篇暫不探討，對其他標籤來講，有效的只有auto、none這兩個值，如果不加這個屬性，效果跟auto一樣，所以加上none屬性之後，就可觸發較低層級的click事件。

舊瀏覽器解決方式

好吧，寫網頁常常就要跟IE瀏覽器相容性做抗爭，因為CSS3在舊的瀏覽器支援度較差(支援度查詢)，所以我們常常要想另外一條路來完成。本例會使用JQuery來實做怎麼觸發這個click。完整程式碼如下：

html

<div id="control">
    <input type="submit" onclick="alert('ok');return false;" value="送出"/>
</div>

<div id="block">
    <div id="content">
        <h3>優先順序較高的圖層</h3>
    </div>
</div>

CSS

#control
{
    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

$(function() {
    $('#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

http://css-tricks.com/pointer-events-current-nav/

http://jsfiddle.net/DC9MF/4/

http://www.w3school.com.cn/jquery/traversing_is.asp

程式宅急便

2013年10月31日星期四