堆疊的畫布元素，最上面的畫布可以防止事件觸及其他人

我有三個HTML5畫布元素。一個是透明的，完全覆蓋另外兩個不重疊的東西（我在它上面繪製的東西必須疊加，所以它的z-index必須是最高的）。堆疊的畫布元素，最上面的畫布可以防止事件觸及其他人

問題是，最上面的一個（overlay_area）阻止其他兩個接收事件。我不需要事件被最頂層的接收，所以

有沒有辦法停止最頂層的畫布接收事件？
如果沒有，是否有辦法將事件傳遞到底部畫布？

對於這個項目，我需要使用hammer.js和no jquery。

<canvas id="overlay_area" 
     style="z-index: 8; position:absolute; left:0px; top:35px;" 
     height="762px" width="968px"> 
     This text is displayed if your browser does not support HTML5 Canvas. 
     </canvas> 

    <canvas id="wave_area" 
     style="z-index: 5; 
     position:absolute; 
     left:0px; 
     top:35px;" 
     height="762px" width="200px"> 
     This text is displayed if your browser does not support HTML5 Canvas. 
     </canvas> 

    <canvas id="edit_area" 
     style="z-index: 5; 
     position:absolute; 
     left:200px; 
     top:35px;" 
     height="762px" width="768px"> 
     This text is displayed if your browser does not support HTML5 Canvas. 
    </canvas>

來源

2012-10-22 janesconference

Theres有幾種方法可以實現這一點，就像Frederic在他的回答中指出的那樣。另一種忽略元素上的鼠標事件的方法是分配以下樣式。

pointer-events:none;

其以及體面的支持和偉大工程。

Live Demo

所以你的情況這將是

<canvas id="overlay_area" 
    style="z-index: 8; position:absolute; left:0px; top:35px; pointer-events:none;" 
    height="762px" width="968px"> 
    This text is displayed if your browser does not support HTML5 Canvas. 
    </canvas>

來源

2012-10-22 21:05:14 Loktar

好，Internet Explorer和Opera [不支持]（http://caniuse.com/pointer-events）'指針-events'，所以也許*廣泛支持*是有點樂觀:) –

啊好點..由於某種原因，我認爲IE8 +支持它。歌劇嘛。 – Loktar

這解決了我的問題（我現在專門爲Safari和Chrome開發，網絡音頻的東西） – janesconference

你可以換三個<canvas>元素到父元素，然後讓事件冒泡到父和處理他們那裏。

使用event對象的pageX和pageY性質，連同你的<canvas>元素的offsetLeft，offsetTop，offsetWidth和offsetHeight特性，將讓你翻譯的鼠標事件的座標和確定，他們將被觸發，其中如果他們能夠達到最低要素。

來源

2012-10-22 18:37:38

堆疊的畫布元素，最上面的畫布可以防止事件觸及其他人

回答

相關問題