web-dev-qa-db-ja.com

要素の外側のクリックイベントで要素を非表示にするにはどうすればよいですか？

これがページ上の任意の場所をクリックしたときに表示要素を非表示にする正しい方法であるかどうかを知りたいです。

$(document).click(function (event) {            
    $('#myDIV:visible').hide();
});

要素（div、spanなど）は、要素の境界内でクリックイベントが発生しても消えてはなりません。

jqueryeventsevent-bubbling
114
Franek

私が理解していれば、div以外の場所をクリックするとdivを非表示にし、divの上でクリックしても閉じないようにする必要があります。あなたはこのコードでそれを行うことができます：

$(document).click(function() {
    alert("me");
});
$(".myDiv").click(function(e) {
    e.stopPropagation(); // This is the preferred method.
    return false;        // This should not be used unless you do not want
                         // any click events registering inside the div
});

これにより、クリックがページ全体にバインドされますが、問題のdivをクリックすると、クリックイベントがキャンセルされます。

198
Jeremy B.

これを試して

 $('.myDiv').click(function(e) { //button click class name is myDiv
  e.stopPropagation();
 })

 $(function(){
  $(document).click(function(){  
  $('.myDiv').hide(); //hide the button

  });
});

私はIDの代わりにクラス名を使用します。asp.netでは、.netがIDに付加する余分なものを心配する必要があるためです。

EDIT-別のピースを追加したため、次のように機能します。

 $('.myDiv').click(function() { //button click class name is myDiv
  e.stopPropagation();
 })

 $(function(){
  $('.openDiv').click(function() {
  $('.myDiv').show(); 

  });
  $(document).click(function(){  
  $('.myDiv').hide(); //hide the button

  });
});
23
TStamper

JQuery 1.7では、イベントを処理する新しい方法があります。私はここで答えて、この「新しい」方法をどのように実行するかを示すと思いました。そうでない場合は、 「on」メソッドのjQueryドキュメント を読むことをお勧めします。

var handler = function(event){
  // if the target is a descendent of container do nothing
  if($(event.target).is(".container, .container *")) return;

  // remove event handler from document
  $(document).off("click", handler);

  // dostuff
}

$(document).on("click", handler);

ここでは、jQueryのセレクターとイベントのバブリングを悪用しています。後でイベントハンドラーをクリーンアップすることに注意してください。 $('.container').one（ 参照：docs ）でこの動作を自動化できますが、ここでは適用できないハンドラー内で条件を実行する必要があるためです。

22
Ben Taylor

次のコード例は、私にとって最もうまくいくようです。 divまたはその子のいずれかに対するそのイベントのすべての処理を停止する 'return false'を使用できます。ポップアップdivのコントロール（たとえば、ポップアップログインフォーム）が必要な場合は、event.stopPropogation（）を使用する必要があります。

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
</head>
<body>
    <a id="link" href="#">show box</a>
    <div id="box" style="background: #eee; display: none">
        <p>a paragraph of text</p>
        <input type="file"  />
    </div>

    <script src="jquery.js" type="text/javascript"></script>

    <script type="text/javascript">
        var box = $('#box');
        var link = $('#link');

        link.click(function() {
            box.show(); return false;
        });

        $(document).click(function() {
            box.hide();
        });

        box.click(function(e) {
            e.stopPropagation();
        });

    </script>
</body>
</html>
13
Thomas

ありがとう、トーマス。私はJSが初めてで、自分の問題の解決策に夢中です。あなたが助けた。

Jqueryを使用して、下にスライドするログインボックスを作成しました。最高のユーザーエクスペリエンスを得るために、ユーザーがボックス以外の場所をクリックしたときにボックスが消えるようにしました。私はこれを修正するのに約4時間使用することに少し恥ずかしいです。しかし、ちょっと、私はJSが初めてです。

多分私のコードは誰かを助けることができます：

<body>
<button class="login">Logg inn</button>
<script type="text/javascript">

    $("button.login").click(function () {
        if ($("div#box:first").is(":hidden")) {
                $("div#box").slideDown("slow");} 
            else {
                $("div#box").slideUp("slow");
                }
    });
    </script>
<div id="box">Lots of login content</div>

<script type="text/javascript">
    var box = $('#box');
    var login = $('.login');

    login.click(function() {
        box.show(); return false;
    });

    $(document).click(function() {
        box.hide();
    });

    box.click(function(e) {
        e.stopPropagation();
    });

</script>

</body>
6
Tommy

また、できることは：

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

  var container = $("div");

   if (!container.is(e.target) && container.has(e.target).length === 0)
  {
 container.fadeOut('slow');

   }

});

ターゲットがdivでない場合、その長さがゼロに等しいことを確認してdivを非表示にします。

5
Sandeep Pal

以下を行いました。共有することで他の人にも利益がもたらされると考えています。

$("div#newButtonDiv").click(function(){
    $(this).find("ul.sub-menu").css({"display":"block"});

    $(this).click(function(event){
        event.stopPropagation();
        $("html").click(function(){
            $(this).find("ul.sub-menu").css({"display":"none"});
        }
    });
});

これについて誰かを助けられるかどうか教えてください。

5
foxybagga

Not children要素でクリックが発生したときにコンテナdivを非表示にする別の方法。

$(document).on('click', function(e) {
    if(!$.contains($('.yourContainer').get(0), e.target)) {
        $('.yourContainer').hide();
    }
});
3
Renato Gama

これを試して：

 $(document).mouseup(function (e) {
    var div = $("#yourdivid");
    if (!div.is(e.target) && div.has(e.target).length === 0) 
    {
       div.hide();
     }
    });
3
Nalan Madheswaran
  $(document).on('click', function(e) { // Hides the div by clicking any where in the screen
        if ( $(e.target).closest('#suggest_input').length ) {
            $(".suggest_div").show();
        }else if ( ! $(e.target).closest('.suggest_container').length ) {
            $('.suggest_div').hide();
        }
    });

ここで#suggest_input inはテキストボックスの名前、.suggest_containerはulクラス名、.suggest_divは私の自動提案のメインdiv要素です。

このコードは、画面の任意の場所をクリックしてdiv要素を非表示にするためのものです。すべてのことを行う前に、コードを理解してコピーしてください...

3
Shaikh Arbaaz
$('html').click(function() {
//Hide the menus if it is visible
});

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

ただし、これらのことにも留意する必要があります。 http://css-tricks.com/dangers-stopping-event-propagation/

2
Muhammad Tahir

これを試して、それは私にとって完璧に働いています。

$(document).mouseup(function (e)
{
    var searchcontainer = $("#search_container");

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

Sandeep Palの答えに基づいた、実用的なCSS /小さなJSソリューションを次に示します。

$(document).click(function (e)
{
  if (!$("#noticeMenu").is(e.target) && $("#noticeMenu").has(e.target).length == 0)
  {
   $("#menu-toggle3").prop('checked', false);
  }
});

チェックボックスをクリックしてから、メニューの外側で試してください：

https://jsfiddle.net/qo90txr8/

2
Bjoerg

これは機能しません。中をクリックすると.myDIVが非表示になります。

$('.openDiv').click(function(e) {
$('.myDiv').show(); 
e.stopPropagation();
})

$(document).click(function(){  
$('.myDiv').hide(); 

});

});

<a class="openDiv">DISPLAY DIV</a>

<div class="myDiv">HIDE DIV</div>
1
Franek
$(document).ready(function(){

$("button").click(function(){
   
       
        $(".div3").toggle(1000);
    });
   $("body").click(function(event) {
   if($(event.target).attr('class') != '1' && $(event.target).attr('class') != 'div3'){
       $(".div3").hide(1000);}
    }); 
   
    
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
<button class="1">Click to fade in boxes</button><br><br>

<body style="width:100%;height:200px;background-color:pink;">
<div class="div3" style="width:80px;height:80px;display:none;background-color:blue;"></div><body>
1
Ehsan KHAN

上記の提案に対するわずか2つの改善点：

  • 完了したらdocument.clickのバインドを解除します

  • クリックを想定して、これをトリガーしたイベントの伝播を停止します

    jQuery(thelink).click(function(e){
    jQuery(thepop).show();

    // bind the hide controls
    var jpop=jQuery(thepop);
    jQuery(document).bind("click.hidethepop", function() {
            jpop.hide();
            // unbind the hide controls
            jQuery(document).unbind("click.hidethepop");
    });
    // dont close thepop when you click on thepop
    jQuery(thepop).click(function(e) {
        e.stopPropagation();
    });
    // and dont close thepop now 
    e.stopPropagation();
});
1
commonpike
$(document).mouseup(function (e)
{
    var mydiv = $('div#mydiv');
    if (!mydiv.is(e.target) && mydiv.has(e.target).length === 0){
       search.slideUp();
    }
});
0
mohammad gitipasand
$( "element" ).focusout(function() {
    //your code on element
})
0
Jafar Choupan