Javascript：[ onmouseover ] 和 [ onmouseout ] 事件

Question

一般问题

---

例如，假设有一个下拉菜单，当您将鼠标悬停在链接上时，会弹出下拉菜单。

但正如您在下面的文章中所读到的那样，它存在问题，当您将鼠标悬停在链接上时（对于某些浏览器，元素内的所有内容），该框都会消失。问题来自于事件冒泡。

在我的文档中，onmouseover 和 onmouseout 都延迟了 0.5 秒，您可以看到有时元素会因为这个问题而开始振动。

--------------
| Layer      |.onmouseout = doSomething;
| --------   |
| | Link | ----> We want to know about this mouseout
| |      |   |
| --------   |
| --------   |
| | Link |   |
| |    ----> | but not about this one
| --------   |
--------------
---->: mouse movement

阅读本文以更好地理解：

www.quirksmode .org - Javascript - 鼠标事件

Quirksmode 解决方案

---

function doSomething(e) {
    if (!e) var e = window.event;
    var tg = (window.event) ? e.srcElement : e.target;
    if (tg.nodeName != 'DIV') return;
    var reltg = (e.relatedTarget) ? e.relatedTarget : e.toElement;
    while (reltg != tg && reltg.nodeName != 'BODY')
        reltg= reltg.parentNode
    if (reltg== tg) return;
    // Mouseout took place when mouse actually left layer
    // Handle event
}

我的文档

---

您可以在这里找到我的完整文档：

JS Bin - 我的文档

您可以在这里找到不带 mouseEvent(e) 函数的原始文档：

JS Bin - Original

将鼠标悬停在按钮上，然后将鼠标悬停在框上，然后快速将鼠标移出并快速返回到然后盒子就会开始振动。 （在 Firefox 3.6 Windows 7 上）

Javascript

<script type="text/javascript">
function mouseEvent(e) {
    if (!e) var e = window.event;
    var tg = (window.event) ? e.srcElement : e.target;
    if (tg.nodeName != 'DIV') return;
    var reltg = (e.relatedTarget) ? e.relatedTarget : e.toElement;
    while (reltg != tg && reltg.nodeName != 'BODY')
        reltg= reltg.parentNode
    if (reltg== tg) return;
    // Mouseout took place when mouse actually left layer
    // Handle event
}
function toggleByType(id, type, e){
    setTimeout(function(){
        var element = document.getElementById(id);
        if(element.style.display == type){
            mouseEvent(e);
            element.style.display = 'none'; 
        } else {
            element.style.display = type;   
        }
    }, 500);
}
</script>

HTML

<div class="box-container" onmouseover="toggleByType('box','block');" onmouseout="toggleByType('box','block', event);">
    <a href="#" class="box-bridge">Show Box</a>
    <div id="box" class="box" style="display:none;">
            Mouse out and this will dissapear.
            <br />
            <a href="#">Roll over to have problems</a>
        </div>
</div>

我的问题

---

quirksmode 给出的解决方案听起来很合乎逻辑，但我不这么认为不知道如何使用该功能我尝试了很多方法，我发布的只是其中一种，但我不明白，所以如果你能帮助我，我会很高兴这项工作。

Answer 1

您在 onmouseover 属性中缺少 event：

onmouseover="toggleByType('box','block', event);" 

但是，在菜单显示之前仍有 500 毫秒的延迟。

Answer 2

为什么不使用纯CSS？使用 :hover 元标记，您可以轻松设置此菜单，而无需使用任何 JS。适用于所有现代浏览器（IE 7 之前版本除外）。

例子：

.box { display: none }; .box-container:hover .box { display: block }