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-マウスイベント

クァークズモードソリューション

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
}

私の文書

あなたはここで私の完全な文書を見つけることができます：

JSBin-私のドキュメント

mouseEvent(e)ここで機能のない元のドキュメントを見つけることができます：

JSビン-オリジナル

ボタンの上にマウスを置き、次にボックスの上にマウスを置き、すぐにマウスアウトしてすぐにボックスに戻ると、振動が始まります。（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ますが、私が投稿したものが1つだけであるかどうかはわかりませんが、わかりません。これを作成するのを手伝っていただければ幸いです。仕事。

4

2 に答える 2

0

あなたは属性に欠けeventています：onmouseover

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

ただし、メニューが表示されるまでにはまだ 500 ミリ秒の遅延があります。

于 2010-09-01T07:43:54.980 に答える
0

純粋な CSS を使用しないのはなぜですか? :hover メタタグを使用すると、JS を使用せずにこのメニューを簡単にセットアップできます。最新のすべてのブラウザーで動作します (IE 7 より前を除く)。

例：

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