Question

一般问题

想象一下下拉菜单，例如当你在链接上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我尝试了很多方式我发布的只是一个，但我不明白，所以我会如果你能帮我做这项工作，我会非常高兴。

Answer 1

event属性中缺少onmouseover：

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

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

Answer 2

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

示例：

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

Javascript：[onmouseover]和[onmouseout]事件

一般问题

Quirksmode解决方案

我的文件

我的问题

2 个答案: