1

マウスが2つの要素を離れたときにイベントをトリガーしたいと思います。私が探しているのはまさに次のjsfiddleです。

http://jsfiddle.net/pFTfm/54/

このコードを使用します：

var count = 0;
$('#d1, #d2').mouseenter(function(){
    count++;
    $('#d3').show();
}).mouseleave(function(){
    count--;
    if (count == 0) { 
        $('#d3').hide();
        $('#d3').css('background-color', 'orange');
    }
});
​

ただし、divが背景色を変更していることがわかるように、イベントは引き続きトリガーされます。

マウスが実際に両方の要素を離れたときにのみイベントがトリガーされるようにしたい。

4

3 に答える 3

8

どうですか：

var count=0;
$('#d1, #d2').mouseenter(function(){
    count++;
    $('#d3').hide();
}).mouseleave(function(){
    count--;

    setTimeout(function(){
        if (count==0){
                $('#d3').show();
            }
    },50);
});
​

jsフィドル

短いタイムアウトは、マウスが 1 つの要素を離れて別の要素に入ったのではなく、実際に両方の要素を離れたことを確認するためのものです。

于 2012-12-01T17:03:59.003 に答える
5

イベントの発生を防ぐことはできませんが、関連するターゲット (元の要素) をチェックして、それがどちらかであるかどうかを確認できます。そうである場合は、イベント ハンドラーから戻るだけです。

何かのようなもの：

var checkRelated = function(e) {
    var id = e.relatedTarget.id;
    return id == 'd1' || id == 'd2';
}

$('#d1, #d2').mouseenter(function(e){
    if (checkRelated(e)) return;
    $('#d3').show();
}).mouseleave(function(e){
    if (checkRelated(e)) return;
    // now we know we actually left both elements
    $('#d3').hide();
});

デモ: http://jsfiddle.net/pFTfm/57/

于 2012-12-01T17:13:06.243 に答える
1

を使用した別のバリエーション.setTimeout()

var timer;

$('#d1, #d2').hover(function(){
    if( timer ) clearTimeout( timer );
    $('#d3').show();
},
function(){
    timer = setTimeout( function( ) {
        $('#d3').hide().css('background-color', 'orange');
    }, 100 );
});

ここでフィドル

于 2012-12-01T18:14:37.357 に答える