带动画画布的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完整性

回答

相关问题