HTML點事件過濾非交互式元素？

我正在考慮使用<canvas> API製作一個簡單的網頁遊戲。我瀏覽了JavaScript庫以查找直接呈現在畫布上的GUI元素，發現其中一些看起來不錯，例如Zebra，但我更願意使用呈現在畫布頂部的標準DOM控件。但是，我遇到了鼠標輸入被我用來包含我想要使用的按鈕，文本框等的<div>的問題。HTML點事件過濾非交互式元素？

考慮以下圖像，或者到this fiddle以查看我的代碼到目前爲止。

Screenshot http://www.ekardnt.com/capture.PNG

紅色背景是一個帆布元件，並且藍色背景是具有四個按鈕一個div。畫布和div都具有「position：absolute」CSS屬性。我已將簡單的alert（）調用添加到畫布'和div的onclick事件中，以向我顯示捕獲輸入的元素。

我想要的是隻要點擊沒有落在按鈕上就可以調用畫布'onclick。也就是說，如果我點擊按鈕容器div的暴露的藍色背景，我希望點擊事件「通過」到畫布。然而，目前，當我點擊一個按鈕，當我點擊藍色區域時，div的onclick被調用 - 這是一個合理的默認行爲，但對我來說很不方便。

有沒有辦法讓我想要的行爲？我已經嘗試將pointer-events: none添加到div的樣式，但是這些按鈕根本不響應輸入。

來源

2013-10-18 Drake

如何不使用一個div容器爲你的按鈕？相反，將位置：絕對畫布上的按鈕。如果您想爲您的按鈕組設置藍色背景，請在畫布上繪製藍色矩形。我的推理是（正如你所發現的）指針事件尚未被瀏覽器普遍採用。 – markE

將pointer-events: none;添加到#buttons容器和pointer-events:auto;到按鈕元素。然後點擊容器將會「跌落」，同時按鈕保持功能。

http://jsfiddle.net/GD4Da/18/

#buttons { 
    /* ... */ 
    pointer-events: none; 
} 
#buttons button { 
    pointer-events: auto; 
}

來源

2013-10-18 20:55:44

在Firefox 24上完美工作，在IE 11上無法工作（按鈕根本不響應鼠標輸入，暗示div上的'none'覆蓋按鈕上的'auto'）。有沒有IE的解決方法，或者我應該嘲笑這些用戶？ – Drake

@Drake你可以決定在IE11中不使用'pointer-events'，並使用JavaScript重新定位畫布上的事件，使用'var event = document.createEvent（'MouseEvents'）;''event.initMouseEvent（... ）'和'element.dispatchEvent（event）;'。 –

HTML點事件過濾非交互式元素？

回答

相關問題