下层div上的鼠标移动事件，上层div上的鼠标点击

Question

有人知道如何实现这样的功能吗？我有两个绝对定位的 div，如下图所示：

（图片已省略）

我想要实现的是，div1 监听鼠标悬停和移出事件，div2 监听鼠标单击事件。当我将鼠标移动到 div2 上时，div1 的 "mouseout" 事件会触发，而我不希望它这样做。我希望用户能够在 div2 上移动光标而不触发 div1 的 "mouseout" 事件（因为 div1 在 div2 的后面，实际上用户并没有将光标移出），并且能够单击 div2。

我没有使用 jQuery，但如果有人能指导我如何在 jQuery 中实现这一点，并添加一些关于 jQuery 如何处理这类问题的详细信息，那么我也会喜欢那个答案；但我仍然更喜欢不使用 jQuery 的答案。

- Pax0r

---

你是否有任何理由需要捕获div1的mouseout事件？ - Sebas

当鼠标进入div1时，显示div2，并在鼠标离开div1时消失。 - Pax0r

Answer 1

mouseout 功能旨在如此运作。

您可以通过检查 mouseout 事件回调的行为来过滤它。

event.relatedTarget != div2

敬礼

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

- Sebas

---

事件目标(event.target)始终会从div1中触发。 - Sameh Serag

抱歉，我的意思是relatedTarget。 - Sebas

Answer 2

你遇到了一个经典的事件冒泡/捕获问题。

看看这篇文章：http://www.quirksmode.org/js/events_order.html

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

以下是一段摘录，让你感到兴奋：

基本问题非常简单。假设你有一个元素在另一个元素内部

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

两个元素都有一个onClick事件处理程序。如果用户点击element2，则会在element1和element2中触发click事件。但是哪个事件先触发？应该先执行哪个事件处理程序？换句话说，事件顺序是什么？

- Ayman Safadi

---

只有当它们是父子关系（冒泡概念）时，单击事件才会在两者上触发。 - Sameh Serag

Answer 3

只要您可以嵌套div1和div2，就可以模拟IE专有的mouseenter/mouseleave事件，这比标准的mouseover/mouseout事件更有用。jQuery通过.mouseenter()和.mouseleave()方法来模拟它们；它们的实现可能会帮助您顺利完成。

这里是一个演示：http://jsfiddle.net/kXjRM

编辑：您是否考虑过使用CSS而不是JS？例如嵌套它们并使用

#two {
  display: none;
}

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

?

- janfoeh

---

这个CSS的想法很不错，虽然我需要JS来实现一些比简单的显示/隐藏更复杂的功能，但我真的很喜欢CSS版本 ;) - Pax0r

Answer 4

如果它们的位置是绝对的，你可以在鼠标移出 div 1 的事件中检查鼠标的坐标。如果它们在 div 1 的矩形内，阻止默认行为，即不调用鼠标移出事件的回调函数。

- Akshat Goel

---

我曾经考虑过那个方案，但我在想是否还有其他解决方案。 - Pax0r