4

有谁知道如何实现这样的功能？我以这种方式有两个绝对定位的 div： 在此处输入图像描述

我想要做的是 div1 正在侦听 mouseover 和 mouseout 事件，而 div2 正在侦听鼠标单击。当我在 div2 上移动鼠标时，会在 div1 上触发 mouseout 事件，我不希望它这样做。我希望用户可以在不触发 div1 mouseout 的情况下在 div2 上移动光标（因为 div1 在 div2 后面，所以实际上用户没有将光标移出）并单击 div2。

我没有使用 jQuery，但有人可以指出我如何在 jQuery 中执行此操作并添加一些详细信息 jQuery 如何处理此类问题，那么我也会喜欢这个答案；）但我仍然更喜欢 jQuery 免费答案。

4

4 回答 4

2

mouseout 功能旨在如此工作。

您可能会过滤掉 mouseout 事件回调的行为，检查是否

event.relatedTarget != div2

rgds

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

于 2012-05-23T13:22:58.167 回答
1

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

于 2012-05-23T13:12:14.773 回答
1

您遇到了一个经典的甚至冒泡/捕获问题。

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

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

这里有一段让你兴奋的摘录：

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

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

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

于 2012-05-23T13:20:13.040 回答
1

如果您可以嵌套 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;
}

?

于 2012-05-23T13:23:47.147 回答