帶動畫畫布的onmouseover完整性

我在處理事件時遇到了與畫布交互的問題。本質上會發生什麼事是畫布UNDERNEATH與事件處理程序的畫布有點影響它上面的畫布，並有時打破事件。帶動畫畫布的onmouseover完整性

我使用的onmouseover事件來隱藏上帆布和onmouseout到重新顯示該元素。請注意，我對onmousemove有同樣的效果。

我已經調換我的代碼到的jsfiddle：http://jsfiddle.net/morgaman/zPuH8/ ...但令人沮喪的它不運行。因此，正在運行的工作版本位於此處：http://chrismorga.com/rainnav/rbowtester.html。

我聽說過「jCanvas」（http://calebevans.me/projects/jcanvas/index.php）是我的問題的jQuery的答案，但我不知道如何編程它或使遞歸動畫工作。幫幫我？

謝謝！

來源

2012-06-19 chris

給你的div保存myCanvasL2與畫布相同的高度和寬度。否則，它會調整其大小在畫布上，而當其設置爲不顯示，它會調用mouseout，因爲它的高度將基本上爲0

Working Version

<div style="z-index:1; position: absolute; left: 18%; top:50px;width:800px;height:50px;" 
    onmouseover="document.getElementById('myCanvasL2').style.display = 'none';" 
    onmouseout="document.getElementById('myCanvasL2').style.display = 'block';"> 
     <canvas id="myCanvasL2" width="800" height="50"></canvas> 
</div>

來源

2012-06-19 16:00:50 Loktar

完美的作品！謝謝。 – chris

Loktar有一個偉大的答案在這裏，但我真的很好奇你到底在做什麼。如果以相同的順序保持了兩個畫布始終是相同的大小，始終只有沒有把事件處理程序上畫布上

生活將是你前進輕鬆了許多。

如果您需要「隱藏」的兩個畫布之一，通過完全清除它（clearRect，內容十分重要）這樣做。

當你需要與它下面的畫布互動，保持一個標誌topCanvasCleared或東西，帆布被清除，而它是true你得到的頂部畫布上的任何事件，你可以傳遞到行爲上的功能第二個畫布就好像事件源自它。由於它們的尺寸相同，因此應該完美地工作。

...但你真的需要這裏兩個畫布？什麼是最終目標？爲什麼你不能擁有一張在不同時間顯示兩種截然不同狀態的畫布？如果你只有一個DOM元素從一開始就擔心，生活將變得更加容易。在一張畫布中獲得迄今爲止所有的功能並不難。

我認爲這裏的解決方案是對迄今爲止只有一個畫布或至多兩個畫布進行重組，而這些畫布不會改變形狀，大小或可視性，事件處理程序僅在最頂層。我敦促你對這兩個想法進行一些思考。

來源

2012-06-19 16:18:38

基本上我要重新創建： http://labs.dragoninteractive.com/panel/demo/ 但使用它作爲一個懸停菜單欄，而不是登錄。我沒有jquery的技巧來dssect這段代碼，或者也使用jCanvas – chris

，如果你看過我的目標示例..唯一的辦法，我可以圖片菜單按鈕的工作是與另一個div或東西我的畫布。（對不起，如果這讓你畏縮）即時通訊有點超過我的頭，但我會盡量減少dom元素的數量。感謝您的輸入！ – chris

啊，這其實是一個很棒的觀點。有時候我會陷入糾正眼前的問題，而不是看整個畫面。 +1 – Loktar

帶動畫畫布的onmouseover完整性

回答

相關問題