javascript - DIVの外側をクリックします

Question

<body>
    <div id="aaa">
       <div id="bbb">
       </div>
    </div>
</body>


$(#?????).click(function(){

     $('#bbb').hide();

})

http://jsfiddle.net/GkRY2/

ユーザーがボックス#bbbの外側をクリックした場合に#bbbを非表示にする場合は、何を使用する必要がありますか？しかし、div #bbbをクリックすると、ボックスはまだ表示されます-外側にのみ表示されます。

score 12 · Accepted Answer

 $('body').click(function(e){
       if( e.target.id == 'bbb' )
          { return true; }
       else
          { $('#bbb').hide(); }

 });

説明の注記：これを行うにはいくつかの方法があります。親要素のクリックをリッスンする必要がある方法、のような直接の親#aaaまたはまたはのような遠い親であるbodyかどうかdocumentです。このようにして、の外部で発生するクリックをキャプチャできます#bbb。

.hideこれで、ユーザーがの内部をクリックした場合に発生しないようにする必要があります#bbb。これは2つの方法で実行できます

ユーザーがをクリックした場合は、伝播を停止します#bbb。これにより、クリックイベントが親に「バブル」しないようになります。そうすれば、クリックイベントが親に到達すること#bbbはなく、非表示になりません。伝播を停止するとすべてのクリックイベントがバブリングするので、私は個人的にこの方法が好きではありません。また、離れた親ではなくローカルの親にバブリングしたいクリックイベントがある場合があります。または、離れた親からリスナーを委任している場合があります。これは、クリックの伝播が停止すると機能を停止します。
#bbb親リスナーの要素を確認します。これが上記の方法です。基本的に、これは離れた親をリッスンし、クリックが発生すると、そのクリックが具体的にオンになっているかどうかを確認します#bbb。オンになってい#bbb .hideない場合は起動され、そうでない場合はtrueが返されるため、clickイベントに関連付けられている可能性のある他のものは引き続き機能します。私はその理由だけでこの方法を好みますが、二次的にはもう少し読みやすく理解しやすい方法です。

最後に、クリックが発生したかどうかを確認する方法には、#bbb多くのオプションがあります。どんなものでもうまくいきます、パターンはこのことの本当の肉です。

http://jsfiddle.net/tpBq4///@Raminsonから変更された答えは非常に似ています。

新しい提案、jQueryなしでイベントバブリングを活用します。

var isOutSide = true
    bbb       = documment.getElementById('bbb');
document.body.addEventListener('click', function(){
   if(!isOutSide){
       bbb.style.display = 'none';
   }
   isOutSide = true;
});

bbb.addEventListener('click', function(){
   isOutSide = false;
});

score 4 · Accepted Answer

clickそれが要素に泡立つようにイベントをキャッチしdocumentます。要素に当たったら、document要素を非表示にします。次に、要素のclickイベントハンドラーで、イベントの伝播を停止して、要素に到達しないようにしdocumentます。

$(function () {
    $(document).on('click', function () {
        $('#bbb').hide();
    });
    $('#bbb').on('click', function (event) {
        event.stopPropagation();
    });
});

これがデモです：http：//jsfiddle.net/KVXNL/

ドキュメントevent.stopPropagation()：http ：//api.jquery.com/event.stopPropagation/

score 2 · Accepted Answer

これを行うプラグインを作成しました。thisこれらの他のソリューションのthis値が参照する場所の値を保持しますdocument。

https://github.com/tylercrompton/clickOut

使用する：

$('#bbb').clickOut(function () {
    $(this).hide();
});

score 1 · Accepted Answer

targetイベントオブジェクトのプロパティを使用できます。次のことを試してください。

$(document).click(function(e) {
    if (e.target.id != 'bbb') { 
          $('#bbb').hide();
    }
})

デモ

score 0 · Accepted Answer

これはうまくいくでしょう

$("#aaa").click(function(){

     $('#bbb').hide();

});

$("#bbb").click(function(event){

    event.stopPropagation();
})

bbbはaaa内にあるため、イベントは「bubbeluptoaaa 」になります。したがって、 bbbがクリックされたevent.stopPropagationときに使用してバブリングを停止する必要があります

http://jsfiddle.net/GkRY2/5/

score 0 · Accepted Answer

わかった

* これはjqueryではありません。IEで動作するように簡単に変更できます

最初に、コーディングを容易にするヘルパーメソッドを作成してJQuery $（）と混同しないでください

    function $g(element) {

    return document.getElementById(element);

    }

リスナークラスを作成する

  function globalClickEventListener(obj){

    this.fire = function(event){
        obj.onOutSideClick(event);
        }
    }

ドキュメント本文のすべてのクリックをキャプチャする必要があるとしましょう

したがって、リスナー配列を作成して作業を初期化する必要があります。このメソッドはロード時に呼び出されます

      function initialize(){

    // $g('body') will return reference to our document body. parameter 'body' is the id of our document body

    $g('body').globalClickEventListeners = new Array();
    $g('body').addGlobalClickEventListener = function (listener)
    {
        $g('body').globalClickEventListeners.push(listener);

    }

    //  capture onclick event on document body and inform all listeners

    $g('body').onclick = function(event) {
        for(var i =0;i < $g('body').globalClickEventListeners.length; i++){
            $g('body').globalClickEventListeners[i].fire(event);
        }
    }

}

初期化後、イベントリスナーを作成し、ドキュメント上のすべてのclcikを知る必要があるオブジェクトの参照を渡します

    function goListening(){

        var icanSeeEveryClick = $g('myid');
        var lsnr = new globalClickEventListener(icanSeeEveryClick);

       // add our listener to listeners array   

        $g('body').addGlobalClickEventListener(lsnr);

       // add event handling method to div   

        icanSeeEveryClick.onOutSideClick = function (event){
             alert('Element with id : ' + event.target.id + ' has been clicked');
        }

    }

*ドキュメントの本文の高さと幅を考慮に入れる

*イベントリスナーが不要な場合は削除します

score 0 · Accepted Answer

$(document).click(function(event) { 
    if(!$(event.target).closest('#elementId').length) {
        if($('#elementId').is(":visible")) {
            $('#elementId').hide('fast');
        }
    }        
})

divで「#elementId」を変更します。

javascript - DIVの外側をクリックします

7 に答える 7

Related

Reference