22

jQueryを使用して、特定の要素ではなくクリックを検出し、その結果としてアクションを実行するにはどうすればよいですか？

私は次のJavaScriptを持っています

$('#master').click(function() {
    $('#slave').toggle();
});

$(document).not('#master','#slave').click(function() {
    $('#slave').hide();
});

論理的にどこが間違っているのかわかりません。ここで実際の例を見ることができます

4

6 に答える 6

53

clickドキュメントのイベントにバインドしているので、 event.targetを使用して、イベントを開始した要素を取得できます。

$(document).click(function(event) {
    if (!$(event.target).is("#master, #slave")) {
        $("#slave").hide();
    }
});

編集：マティアスが彼のコメントで正しく指摘しているように、上記のコードは#masterとの子孫から来るクリックイベントを識別できません#slave（もしあれば）。この状況では、closest（）を使用してイベントのターゲットを確認できます。

$(document).click(function(event) {
    if (!$(event.target).closest("#master, #slave").length) {
        $("#slave").hide();
    }
});
于 2012-06-01T13:38:54.167 に答える
3

このコードはあなたが望むことをしますか？（私が正しく理解したかどうかは完全にはわかりません）

$('body').on('click', '*:not( #master, #slave )', function() {
    $('#slave').hide();
});

http://jsfiddle.net/gZ4Hz/8/

于 2012-06-01T13:42:09.293 に答える
2

イベントの委任は、jQueryによってネイティブにサポートされてきました。難しいのは、適切なセレクターを作成することです。元々delegateは使用されていましたが、最近ではのデリゲート形式をon使用する必要があります。

イベント委任の目的は、子要素のイベントをリッスンし、親ではなく子要素にバインドされているかのように、それらの要素のバインドされたイベントハンドラーを呼び出すことです。これは、ハンドラーをDOM内のすべての要素にバインドする代わりに、ハンドラーを最初の選択のすべての要素（document単一の要素）にバインドすることを意味します。これにより、単一のセレクターを使用して、絶えず変化する要素のセットにバインドする簡単な方法も作成されます。新しい要素はdocument、最初のイベントハンドラーがバインドされたときに存在したかどうかに関係なく、イベントを伝播します。

$(document).on('click', '*:not(#master, #master *, #slave, #slave *)', function (e) {
    //this will reference the clicked element
});

さらに、要素がまたはであってはならないだけでなく、または#masterの子であっ#slaveてはならないことに注意してください。#master#slave

于 2012-09-03T22:22:59.613 に答える
1

body別の考えとして、ブラウザが100％の高さでレンダリングされていない可能性があるため、機能していない可能性があります。ベースのCSSを調整して体の高さを修正してから、他のいくつかの考えを試してください。

e.stopPropagation（）：イベントがDOMツリーをバブリングするのを防ぎ、親ハンドラーにイベントが通知されないようにします。

したがって、ファーストクリックコードを次のように変更すると、次のようになります。

$('#master').click(function(e) {
    e.stopPropagation();
    $('#slave').toggle();
});

次に、2番目のコールサインも変更できます。

$("body, body *").not('#master, #slave').click(function(e) {
    $('#slave').hide();
});

そしてそれはそれをカバーするはずです。試してみる！またはこのjsFiddleを参照してください

于 2012-06-01T13:49:49.777 に答える
0

Fredrikの回答は、ドキュメントにすでに存在する要素に対しては機能しますが、ajax呼び出しによってフェッチされた要素に対しては機能しませんでした。私は以下を試しました、そしてそれは私のために働きます。将来のajaxコーダーのためにコードを共有する。

    $(document).on('click',function(event) {
        if (!$(event.target).closest("#selector").length) {
            if ($('#selector').is(":visible"))
                $('#selector').slideUp();
        }
    });

コメントとして投稿していたと思いますが、評判がよくありません。

于 2013-09-11T11:32:45.810 に答える
0 
$('.clickable-row').on("click",function(){
  window.location = $(this).data('href');
  return false;
});
$("td > a").on("click",function(e){
  e.stopPropagation();
});

また

jQuery(document).ready(function($) {
    $('.clickable-row').on("click",function(){
      window.location = $(this).data('href');
      return false;
    });
    $("td > a").on("click",function(e){
        e.stopPropagation();
    });
});
于 2018-04-26T14:20:02.007 に答える