web-dev-qa-db-ja.com

divの外側をクリックすると非表示になります

この質問は何度も尋ねられましたが、答えはどれもうまくいかないようです。

Divのcssは次のとおりです。

#info{
  display: none;
  position: fixed;
  z-index: 500;
  height: 50%;
  width: 60%;
  overflow: auto;
  background: rgba(187, 187, 187, .8);
}

私は次のコードを使用しようとしました：

$("#info").click(function(e){
  e.stopPropagation();
});

$(document).click(function(){
  $("#info").hide();
});

このコードと同様に：

$(document).mouseup(function (e){
    var container = $("#info");

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

しかし、divをクリックすると、それも消えます。理由はわかりませんが、そうなります。
他にうまくいくものはありますか？

jqueryhtmlonclickhide
17
Gooey

ターゲットにはid=info、あなたが試すことができます：

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

  // check that your clicked
  // element has no id=info

  if( e.target.id != 'info') {
    $("#info").hide();
  }
});

また試すことができます：

$(document).click(function() {

  if( this.id != 'info') {
    $("#info").hide();
  }

});

コメントによる

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

    // check that your clicked
    // element has no id=info
    // and is not child of info
    if (e.target.id != 'info' && !$('#info').find(e.target).length) {
        $("#info").hide();
    }
});
31
thecodeparadox

onclickイベントハンドラーをdocumentオブジェクトに接続します。

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

デモ： http://jsfiddle.net/aUjRG/

これが何が起こっているのかをよりよく理解するのに役立つ、純粋なJavaScriptのソリューションです。

function hideInfo(){
    if(window.event.srcElement.id != 'info'){
        document.getElementById('info').style.display = 'none';
    }
}

document.onclick = hideInfo;

デモ： http://jsfiddle.net/mmzc8/

どちらのソリューションも、ユーザーがクリックした場所がinfoのIDを持つ要素上にあるかどうかを確認します。ユーザーがinfo要素をクリックしなかった場合、info要素を非表示にします。

4
RobB

このコードを試してください、これは私にとって最適です。

jQuery('.button_show_container').click(function(e) {
    jQuery('.container').slideToggle('fast'); 
    e.stopPropagation();
});

jQuery(document).click(function() {
        jQuery('.container').slideUp('fast');
});
3
Ken Avila

IPadでも機能するソリューションを使用するには、代わりに次の機能トリガーを使用する必要があります。

$(document).on("mousedown touchstart",function(e){
  var $info = $('#info');
  if (!$info.is(e.target) && $info.has(e.target).length === 0) {
    $info.hide();
  }
});

同様に、マウスアップを隠したい場合は、「タッチエンド」を追加します。

$(document).on("mouseup touchend",function(e){
  ...
});
3
Andy Lorenz

特定のdivまたはそのdiv要素内のいずれかがクリックされたかどうかのマウスクリックのチェックのみにクラスを追加できます。

$(document).click(function(e){            
    if ( !$(e.target).hasClass("[class name for check]") &&
         $("[element class or id]").css("display")=="block" ) {
            //...code if clicked out side div
    }
});
0
Ahmad.Iftikhar