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

[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

 


    <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

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

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

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