Javascript：[onmouseover] 和 [onmouseout] 事件答案

【问题标题】：Javascript : [ onmouseover ] and [ onmouseout ] eventJavascript：[onmouseover] 和 [onmouseout] 事件
【发布时间】：2011-04-06 16:00:41
【问题描述】：

一般问题

例如，想象一个下拉菜单，当您在链接上mouse over 时，下拉菜单会弹出。

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

在我的文档中onmouseover 和onmouseout 是delayed with 0.5 seconds，您可以看到有时元素会因为这个问题而开始振动。

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

阅读这篇文章以更好地理解：

www.quirksmode.org - Javascript - Mouse Events

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 - My documents

你可以在这里找到没有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 给出的解决方案听起来合乎逻辑，但我不知道how to use the function 我尝试了很多方法，我发布的只是一种，但我不明白，所以我会非常如果你能帮我完成这项工作，我会很高兴。

【问题讨论】：

标签： javascript events onmouseover onmouseout

【解决方案1】：

onmouseover 属性中缺少 event：

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

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

【讨论】：

好吧，首先我也将事件添加到onmouseover，但这并不是更好：|。

【解决方案2】：

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

例子：

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

【讨论】：

我想延迟 0.5 秒。