web-dev-qa-db-ja.com

jQueryは1 divを除くページの任意の場所をクリックします

1つのdiv（id=menu_content）以外のページの任意の場所をクリックしたときに、関数をトリガーするにはどうすればよいですか？

javascriptjqueryhtmltriggersclick
75
Vincent Roye

clickがドキュメントのbodyに適用され、clickイベントがID menu_contentのdivによって生成された場合、click処理をキャンセルできます。 menu_contentを除くすべての要素とclickの要素および保存バインディング

$('body').click(function(evt){    
       if(evt.target.id == "menu_content")
          return;
       //For descendants of menu_content being clicked, remove this check if you do not want to put constraint on descendants.
       if($(evt.target).closest('#menu_content').length)
          return;             

      //Do processing of click event here for every element except with id menu_content

});
121
Adil

jQuery Event Target のドキュメントを参照してください。イベントオブジェクトのターゲットプロパティを使用すると、#menu_content要素内でクリックが発生した場所を検出し、発生した場合はクリックハンドラーを早期に終了できます。クリックが#menu_contentの子孫で発生した場合を処理するには、 .closest() を使用する必要があります。

$(document).click(function(e){

    // Check if click was triggered on or within #menu_content
    if( $(e.target).closest("#menu_content").length > 0 ) {
        return false;
    }

    // Otherwise
    // trigger your click function
});
46
nbrooks

これを試して

 $('html').click(function() {
 //your stuf
 });

 $('#menucontainer').click(function(event){
     event.stopPropagation();
 });

外部イベント を使用することもできます

40
Database_Query

私はこの質問に答えていることを知っています、そして、すべての答えは素晴らしいです。しかし、似たような（まったく同じではない）問題を抱えている人のために、この質問に2セントを加えたいと思いました。

より一般的な方法では、次のようなことができます。

$('body').click(function(evt){    
    if(!$(evt.target).is('#menu_content')) {
        //event handling code
    }
});

このように、ID menu_contentの要素以外によって発生するイベントだけでなく、CSSセレクターを使用して選択できる要素以外のすべてによって発生するイベントも処理できます。

たとえば、次のコードスニペットでは、ID myNavbarのdiv要素の子孫であるすべての<li>要素を除くすべての要素によって発生するイベントを取得しています。

$('body').click(function(evt){    
    if(!$(evt.target).is('div#myNavbar li')) {
        //event handling code
    }
});
5
gandalf

ここに私がやったことがあります。日付ピッカーの子を閉じることなくクリックできるようにしたかった。

$('html').click(function(e){
    if (e.target.id == 'menu_content' || $(e.target).parents('#menu_content').length > 0) {
        // clicked menu content or children
    } else {
        // didnt click menu content
    }
});

私の実際のコード：

$('html').click(function(e){
    if (e.target.id != 'datepicker'
        && $(e.target).parents('#datepicker').length == 0
        && !$(e.target).hasClass('datepicker')
    ) {
        $('#datepicker').remove();
    }
});
4
Nate