javascript - jqueryは関数の欠落要素ではありません

Question

ツールヒントを使用してページにエラーメッセージを表示します。ビュー内の他の場所をクリックしたときにツールヒントを閉じる必要があります。以下のコードを使用して、このアクションを制御します。

$(':not(.qtip)').click(function(){
   $('.qtip').hide();
});

「.qtip」は、ツールチップ領域をマークするために使用されます。ツールチップ自体は、出てきたときに新しいものを作成します。ここで起こったことは、ツールチップをクリックすると消えてしまうことです。

しかし、全身の代わりにセレクターの小さなスケールを使用すると、うまく動作します。これは少し奇妙です。例:

$("#id").not('.qtip').click(function (){
    $('.qtip').hide();
});

score 2 · Accepted Answer

documentツールチップの外側でクリックを処理することだけをターゲットにすることをお勧めします。のセレクター:not(.qtip)は、非常に大きな結果セットを返す可能性があります。

$(document).on('click', function() {
    $('.qtip').hide();
}

まだ行っていない場合は、ツールチップ自体で、クリックイベントがドキュメントレベルにバブリングしないようにする必要があります。

$('.qtip').on('click', false);

score 1 · Accepted Answer

イベントバブリングを有利に使用する

$(document).on("mouseup", function (e) {
    var target = e.target || e.srcElement;
    var container = $(".qtip");

    if (container.not(target) && container.has(target).length === 0)
    {
        container.hide();
    }
});

score 1 · Accepted Answer

次の 2 つのことを行うことをお勧めします。

$(document).click(function() {
    $('.qtip').hide();
});


$('.qtip').click(function(e){
    e.stopPropagation();
});

ドキュメントをクリックして非表示にします.qtip
のクリック時にイベントのバブリングを停止します.qtip。ここでは、クリックは親までトラバースしません。

score 0 · Accepted Answer

試す

$(document).on("click", function(e) {
    var qtip = $(e.target).closest('.qtip');
    if(!qtip.length)
        $('.qtip').hide();
});

javascript - jqueryは関数の欠落要素ではありません

4 に答える 4

Related

Reference