Jquery 带动画画布的onmouseover完整性

我的事件处理程序与画布交互时遇到问题。本质上，事件处理程序位于画布下方的画布会以某种方式影响其上方的画布，有时会破坏事件

我使用onmouseover事件隐藏上部画布，使用onmouseout重新显示元素。请注意，我使用onmousemove获得相同的效果

我已经将代码转换成JSFIDLE:…但令人沮丧的是它没有运行。因此，工作版本本身是在这里实时托管的：

我听说jCanvas是解决我问题的jQuery答案，但我不知道如何编程或使递归动画工作。帮助？

为您的div提供与画布相同的高度和宽度来容纳MyCanvas2。否则，它将根据画布调整大小，当设置为“不显示”时，它将调用mouseout，因为其高度基本上为0

给你的div赋予与画布相同的高度和宽度来容纳myCanvasL2。否则，它将根据画布调整大小，当设置为“不显示”时，它将调用mouseout，因为其高度基本上为0

---

Loktar有一个很好的答案，但我真的很好奇你到底在做什么

如果您将两个画布始终保持相同的大小和顺序，并且只将事件处理程序放在顶部画布上，那么您的生活将更加轻松

如果您需要隐藏两张画布中的一张，请将其完全清除为clearRect，yada-yada

如果需要与画布下方的画布进行交互，则清除该画布时，保留一个标记topCanvasCleared或其他标记，并且当在顶部画布上获得的任何事件为true时，可以将其传递给在第二个画布上起作用的函数，就像事件源于它一样。既然它们大小一样，它应该能完美地工作

…但你真的需要两张画布吗？最终目标是什么？为什么不能用一个画布在不同的时间显示两种截然不同的状态呢？如果您从一开始就只需要担心一个DOM元素，那么您的生活实际上会轻松得多。在一块画布上拥有迄今为止所有的功能当然并不难

---

我认为，这里的解决方案是将迄今为止的内容重组为一个画布或最多两个画布，它们永远不会改变形状、大小或可见性，事件处理程序只在最上面一个画布上。我敦促你仔细考虑这两个想法。

洛塔在这里有一个很好的答案，但我真的很好奇你到底在做什么

如果您将两个画布始终保持相同的大小和顺序，并且只将事件处理程序放在顶部画布上，那么您的生活将更加轻松

如果您需要隐藏两张画布中的一张，请将其完全清除为clearRect，yada-yada

如果需要与画布下方的画布进行交互，则清除该画布时，保留一个标记topCanvasCleared或其他标记，并且当在顶部画布上获得的任何事件为true时，可以将其传递给在第二个画布上起作用的函数，就像事件源于它一样。既然它们大小一样，它应该能完美地工作

…但你真的需要两张画布吗？最终目标是什么？为什么不能用一个画布在不同的时间显示两种截然不同的状态呢？如果您从一开始就只需要担心一个DOM元素，那么您的生活实际上会轻松得多。在一块画布上拥有迄今为止所有的功能当然并不难

---

我认为，这里的解决方案是将迄今为止的内容重组为一个画布或最多两个画布，它们永远不会改变形状、大小或可见性，事件处理程序只在最上面一个画布上。我强烈建议您考虑一下这两个想法。

基本上我想重新创建它：但将其用作悬停菜单栏，而不是登录。如果您已经看过我的目标示例，那么我没有jquery专门知识来选择这段代码，或者使用jcanvas。。我能想象菜单按钮工作的唯一方法是在画布上放上另一个div或其他东西。很抱歉，如果这让你感到畏缩，我会尽量减少dom元素的数量。谢谢你的意见！啊，是的，事实上这是一个很好的观点。有时，我过于专注于解决眼前的问题，而不是着眼于全局+我也投票给你了，老洛克。SO的一大优点是，在问题解决后，会保留多个答案，因为你永远不知道搜索档案的人是否会遇到一个问题，并希望对一个技术问题给出一个非常技术性的答案，或者以另一种方式定义问题，等等。如果你在一个模棱两可的问题上只看到一种类型的答案，它总是值得提供另一个！一个很好的例子是这样一个问题：这两个答案都有很多我想要的价值

---

重新创建：但将其用作悬停菜单栏，而不是登录。如果您已经看过我的目标示例，那么我没有jquery专门知识来选择这段代码，或者使用jcanvas。。我能想象菜单按钮工作的唯一方法是在画布上放上另一个div或其他东西。很抱歉，如果这让你感到畏缩，我会尽量减少dom元素的数量。谢谢你的意见！啊，是的，事实上这是一个很好的观点。有时，我过于专注于解决眼前的问题，而不是着眼于全局+我也投票给你了，老洛克。SO的一大优点是，在问题解决后，会保留多个答案，因为你永远不知道搜索档案的人是否会遇到一个问题，并希望对一个技术问题给出一个非常技术性的答案，或者以另一种方式定义问题，等等。如果你在一个模棱两可的问题上只看到一种类型的答案，它总是值得提供另一个！一个很好的例子是这样一个问题：两个答案都有很大的价值

<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>​