鼠标在下部div上移动事件，鼠标单击上部

Question

有没有人知道如何实现这样的功能？ 我有两个绝对定位的div：

我想要做的是div1正在监听mouseover和mouseout事件以及div2用于鼠标点击。 当我在div2上移动鼠标时，mouseout事件在div1上触发，我不希望它。 我希望用户可以在div2上移动光标而不触发div1 mouseout（因为div1在div2后面，所以实际上用户没有移动光标）并单击div2。

我没有使用jQuery，但是有人可以指出我如何在jQuery中执行此操作并添加jQuery如何处理这样的问题的一些细节然后我也会喜欢这个答案;）但我仍然更喜欢jQuery免费答案。 / p>

Answer 1

mouseout功能旨在实现。

您可以过滤掉mouseout事件回调检查的行为

event.relatedTarget != div2

RGDS

编辑：关于div2的点击，请评论您可能遇到的任何其他问题，但我认为不应该有任何问题。

Answer 2

好吧，如果它们绝对定位，你可以在div 1的mouseout事件上检查鼠标的坐标。如果它们在div 1的矩形中，防止它的默认行为，就是不要调用回调函数鼠标事件。

Answer 3

你遇到了经典的冒泡/捕捉问题。

查看此文章：http://www.quirksmode.org/js/events_order.html

它能够比我更好地解释你的情况！

这是让你兴奋的一个例子：

  

基本问题很简单。假设你有一个元素   元件

-----------------------------------
| element1                        |
|   -------------------------     |
|   |element2               |     |
|   -------------------------     |
|                                 |
-----------------------------------

  

并且都有一个onClick事件处理程序。如果用户单击element2，则会导致单击事件   element1和element2。但哪个事件首先发生？哪个事件   处理程序应该先执行？换句话说，是什么事件   购买？

Answer 4

如果您可以嵌套div 1和div 2，您可以模拟IE专有的mouseenter / mouseleave事件，这些事件比标准的mouseover / mouseout事件更有用。 jQuery有通过.mouseenter()和.mouseleave()模拟它们的方法;他们的实施可能会帮助你。

以下是演示：http://jsfiddle.net/kXjRM

编辑：您是否考虑过使用CSS代替JS？就像嵌套它们并使用

一样

#two {
  display: none;
}

#one:hover #two {
  display:block;
}