20

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

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をクリックするたびに消えますが、理由はわかりませんが、消えます。
他にうまくいくものはありますか？

4

6 に答える 6

36

あなたのターゲットが持っている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();
    }
});
于 2012-07-18T16:01:56.313 に答える
5

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

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

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

$(document).on("mouseup touchend",function(e){
  ...
});
于 2014-10-19T17:14:46.340 に答える
4

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/

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

于 2012-07-18T16:04:26.543 に答える
3

このコードを試してみてください。これが私にとって最高です。

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

jQuery(document).click(function() {
        jQuery('.container').slideUp('fast');
});
于 2015-03-16T02:35:44.643 に答える
-1

以下の解決策を試してください。再帰的にも機能しています：

$(document).mouseup(function(e) 
{
    var container = $("YOUR CONTAINER SELECTOR");

    // if the target of the click isn't the container nor a descendant of the container
    if (!container.is(e.target) && container.has(e.target).length === 0) 
    {
        container.hide();
    }
});

参照 - https://stackoverflow.com/a/7385673/3910232

于 2017-09-21T11:09:25.470 に答える