2

すべてのページにjqueryを含めたくないのですが、セクションのホバーにグローバルな「ポップダウン」メニューを追加していますが、マウスを動かすだけで煩わしいので、すぐには使いたくありません。通常、これはjqueryとhoverintentを使用して行いますが、今回は行いません。

エリアのタイムアウトをオンに設定できると思いonmouseoverますが、それが単純なものかどうかはわかりません（たとえば、マウスの移動中に何千回も起動するのではないでしょうか？）

現在のコードはこんな感じです...

<div onMouseOver="showCart();">Hover here!</div>

それで、それをこの作品に変えるでしょうか？：

<div onMouseOver="setTimeout(showCart, 50);">Hover here!</div>
4

2 に答える 2

2

これは本当に単純なVanillaDOMアプローチです。これには、target（メニュー項目の）IDを持つ要素とID'ドロップダウン'を持つ要素が必要です。

これはグローバルな古いスタイルの「on」ハンドラーを使用することに注意してください。これはおそらくベストプラクティスではありません（使用する必要がありますaddEventListener）が、これによりコードがもう少し読みやすくなると思います:)

ここでjsFiddleも設定しました

var target = document.getElementById('target');
var dropdown = document.getElementById('dropdown');
var curEl;

document.onmousemove = function(e) {
    e = e || window.event;
    curEl = e.target || e.srcElement;
}

target.onmouseover = function(e) {
    setTimeout(function() {
        if (curEl === target || curEl === dropdown) {
            dropdown.style.display = "block";
        } else {
            dropdown.style.display = "none";
        }
    }, 300);
}

target.onmouseout = dropdown.onmouseout = function() {
    setTimeout(function() {
        if (curEl !== target && curEl !== dropdown) {
            dropdown.style.display = "none";
        }
    }, 300);
}
于 2012-07-05T17:48:36.673 に答える
0

さて、私の最初の試みは惨めに失敗しましたが、それからそれをそのように機能させました...

<div onmouseover="window.mycarthoverin = 1; setTimeout(showCart, 100);" onmouseout="window.mycarthoverin = 0;">Hover here!</div>

そして中showCart...

if (window.mycarthoverin == 1) {
  ...
}

誰かが私が気付いていないかもしれないこのアプローチの問題を見ますか？

于 2012-07-05T17:28:08.663 に答える