0

一般问题

例如，想象一个下拉菜单，当您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 - 鼠标事件

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 - 原创

将鼠标悬停在按钮上，然后将鼠标悬停在框上，然后快速将鼠标移出并快速返回框，然后它将开始振动。（在 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我尝试了很多方法，我发布的只是一种，但我不明白，所以如果你能帮助我做到这一点，我会很高兴工作。

4

2 回答 2

0

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

例子：

.box { display: none }; .box-container:hover .box { display: block }
于 2010-09-01T07:49:27.877 回答
0

您event在onmouseover属性中缺少：

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

但是，在菜单出现之前你还有 500 毫秒的延迟。

于 2010-09-01T07:43:54.980 回答