多層畫布和點擊事件（Createjs）

Question

我有一個使用多層畫布的例子。

HTML：

<body>
    <div id="background">
        <div id="canvas">
            <canvas id="main" width="1024" height="768"></canvas>
            <canvas id="animation" width="1024" height="768"></canvas>            
        </div>
    </div>
</body>

CSS：

body{
    margin: 0 auto;
}

#background {
    width: 1600px;
    height: 768px;
    margin: 0 auto;
    background: url(../Images/bg2.jpg) no-repeat;
    position: relative;   
}

#canvas {
    width: 1024px;
    height: 768px;
    margin: 0 auto;
}
canvas{
    background: transparent;
    position:absolute;
}

#main {
    background: url(../Images/bg_ban.png) no-repeat;
}

在主畫布中繪制了一些對象（這些對象需要可點擊）。

在動畫畫布中繪制了更多對象。 但是，此畫布（動畫一）位於主畫布上方，並且無法單擊主畫布中的對象。

誰能幫助我理解為什么？

Answer 1

您將嘗試使用css 指針事件的屬性。

#animation {
    pointer-events: none;
}

Answer 2

如果不手動注入某些功能，這是不可能的。 不幸的是，指針事件CSS屬性還沒有得到很好的支持，所以它不是一個真正的選擇。 最好的方法是捕獲頂層的點擊事件（等），並手動傳播它們（在下層調用Stage鼠標處理程序）。

我認為在EaselJS內部嘗試處理這個問題是一個不錯的主意，並且已經向團隊展示了它。

另一件需要考慮的是你使用多個階段的原因。 它不是必需的，除非你在一個階段有大量的靜態內容，並且不想在每個刻度上重繪它。 在這種情況下，您可以緩存它，然后它將是每個tick的一個繪制調用，它應該具有最小的效果。

多層畫布和點擊事件（Createjs）

問題描述

2 個解決方案

解決方案1
2 2013-07-12 07:35:46

解決方案2
0 已采納 2013-07-12 21:06:50

多層畫布和點擊事件（Createjs）

問題描述

2 個解決方案

解決方案1 2 2013-07-12 07:35:46

解決方案2 0 已采納 2013-07-12 21:06:50

解決方案1
2 2013-07-12 07:35:46

解決方案2
0 已采納 2013-07-12 21:06:50