2013-10-08

CSS: pointer-events

在 Flash/AS3 利用下式就可以關閉某個 MovieClip 對滑鼠事件的反應。
mc.mouseEnabled = false;

在 CSS 可以利用 pointer-events, 可惜 IE 連 IE10 都不支援 !
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>What</title>
    <style type="text/css">
    .layer {
        width: 300px;
        height: 300px;
        position: absolute;
        background-color: #F00;
    }
    #a2 {
        pointer-events: none;
    }
    </style>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
</head>
<body>
    <script type="text/javascript">
    $(function() {
        $('#a1').click(function(event) {
            alert('a1');
        });
    });
    </script>
    <div style="position: relative;">
        <div id="a1" class="layer" style="z-index:10;">
        </div>
        <div id="a2" class="layer" style="z-index:11; left:100px; top:100px; background-color: #00F">
        </div>
    </div>
</body>
</html>

IE 的解法: http://stackoverflow.com/questions/9385213/how-to-make-internet-explorer-emulate-pointer-eventsnone

FB 留言