web-dev-qa-db-ja.com

ユーザーがDIVの外側をクリックしたときにjQueryを使用してDIVを非表示にする

私はこのコードを使っています：

$('body').click(function() {
   $('.form_wrapper').hide();
});

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

そしてこのHTML：

<div class="form_wrapper">
   <a class="agree" href="javascript:;">I Agree</a>
   <a class="disagree" href="javascript:;">Disagree</a>
</div>

問題は、DIV内にリンクがあり、クリックしても機能しなくなったことです。

jqueryhtmlhidestyling
911
Scott Yu - Front-End UX

同じ問題があった、この簡単な解決策を思い付いた。それは再帰的に動作しています：

$(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();
    }
});
2376
user659025

このようなものを使ったほうがいいでしょう。

var mouse_is_inside = false;

$(document).ready(function()
{
    $('.form_content').hover(function(){ 
        mouse_is_inside=true; 
    }, function(){ 
        mouse_is_inside=false; 
    });

    $("body").mouseup(function(){ 
        if(! mouse_is_inside) $('.form_wrapper').hide();
    });
});
198
Makram Saleh

このコードは、ページ上のクリックイベントを検出し、クリックされた要素が#CONTAINER要素でもその子孫でもない場合に限り、#CONTAINER要素を隠します。

$(document).on('click', function (e) {
    if ($(e.target).closest("#CONTAINER").length === 0) {
        $("#CONTAINER").hide();
    }
});
72
Case

StopPropagationに頼るのではなく、ボディに対して発生するclickイベントのターゲットを確認することをお勧めします。

何かのようなもの：

$("body").click
(
  function(e)
  {
    if(e.target.className !== "form_wrapper")
    {
      $(".form_wrapper").hide();
    }
  }
);

また、body要素には、ブラウザに表示される表示スペース全体が含まれていない場合があります。クリックが登録されていないことに気付いた場合は、代わりにHTML要素のクリックハンドラを追加する必要があります。

70
David Andres

ライブデモ

クリック領域がターゲット要素またはその子にないことを確認してください

$(document).click(function (e) {
    if ($(e.target).parents(".dropdown").length === 0) {
        $(".dropdown").hide();
    }
});

更新：

jQueryの停止伝播は最良の解決策です

ライブデモ

$(".button").click(function(e){
    $(".dropdown").show();
     e.stopPropagation();
});

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

$(document).click(function(){
    $(".dropdown").hide();
});
30
Salim
$(document).click(function(event) {
    if ( !$(event.target).hasClass('form_wrapper')) {
         $(".form_wrapper").hide();
    }
});
18
meder omuraliev

解決策を以下のものに更新しました。

  • 代わりにmouseenterとmouseleaveを使用してください。
  • ホバーの使用ライブイベントバインディング

var mouseOverActiveElement = false;

$('.active').live('mouseenter', function(){
    mouseOverActiveElement = true; 
}).live('mouseleave', function(){ 
    mouseOverActiveElement = false; 
});
$("html").click(function(){ 
    if (!mouseOverActiveElement) {
        console.log('clicked outside active element');
    }
});
16
benvds

のためのjQueryのない解決策 - 最も人気のある答え ：

document.addEventListener('mouseup', function (e) {
    var container = document.getElementById('your container ID');

    if (!container.contains(e.target)) {
        container.style.display = 'none';
    }
}.bind(this));

MDN： https://developer.mozilla.org/en/docs/Web/API/Node/contains

12
Martin Vseticka

ライブデモ ESC 機能性

デスクトップとモバイルの両方で動作します

var notH = 1,
    $pop = $('.form_wrapper').hover(function(){ notH^=1; });

$(document).on('mousedown keydown', function( e ){
  if(notH||e.which==27) $pop.hide();
});

場合によっては、ドキュメントをクリックしたときに要素が実際に表示されていることを確認する必要があります。if($pop.is(':visible') && (notH||e.which==27)) $pop.hide();

8
Roko C. Buljan

このようなものではないでしょうか。

$("body *").not(".form_wrapper").click(function() {

});

または

$("body *:not(.form_wrapper)").click(function() {

});
6
MRVDOG

イベントスピーカー：

$("html").click(function(){ 
    $(".wrapper:visible").hide();
});
4
Olivenbaum

DOMを1回クリックして特定の要素を非表示にする代わりに、tabindexを親の<div>に設定してfocusoutイベントを聞くことができます。

tabindexを設定すると、blurイベントが<div>で発生するようになります（通常は発生しません）。

だからあなたのHTMLはこんな感じになるでしょう：

<div class="form_wrapper" tabindex="0">
    <a class="agree" href="javascript:;">I Agree</a>
    <a class="disagree" href="javascript:;">Disagree</a>
</div>

そしてあなたのJS：

$('.form_wrapper').on('focusout', function(event){
    $('.form_wrapper').hide();
});
4
Oscar

Prc322の素晴らしい答えをもとにしています。

function hideContainerOnMouseClickOut(selector, callback) {
  var args = Array.prototype.slice.call(arguments); // Save/convert arguments to array since we won't be able to access these within .on()
  $(document).on("mouseup.clickOFF touchend.clickOFF", function (e) {
    var container = $(selector);

    if (!container.is(e.target) // if the target of the click isn't the container...
        && container.has(e.target).length === 0) // ... nor a descendant of the container
    {
      container.hide();
      $(document).off("mouseup.clickOFF touchend.clickOFF");
      if (callback) callback.apply(this, args);
    }
  });
}

これはいくつかのことを追加します...

  1. "無制限"の引数を持つコールバックを持つ関数内に配置
  2. 実行されたドキュメントからイベントをアンバインドするために、jqueryの.off（）への呼び出しをイベント名前空間と組み合わせて追加しました。
  3. モバイル機能のための付属のtouchend

これが誰かに役立つことを願っています！

4
WiseOlMan

そしてIPADやIPHONEのようなタッチデバイスのために我々は以下のコードを使うことができます。

$(document).on('touchstart', function (event) {
var container = $("YOUR CONTAINER SELECTOR");

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

これは私が別のスレッドで見つけたjsfiddleです、escキーでも動作します： http://jsfiddle.net/S5ftb/404

    var button = $('#open')[0]
    var el     = $('#test')[0]

    $(button).on('click', function(e) {
      $(el).show()
      e.stopPropagation()
    })

    $(document).on('click', function(e) {
      if ($(e.target).closest(el).length === 0) {
        $(el).hide()
      }
    })

    $(document).on('keydown', function(e) {
      if (e.keyCode === 27) {
        $(el).hide()
      }
    })
4
djv
var n = 0;
$("#container").mouseenter(function() {
n = 0;

}).mouseleave(function() {
n = 1;
});

$("html").click(function(){ 
if (n == 1) {
alert("clickoutside");
}
});
2
Gary

フォームラッパーの外側の最上位要素にクリックイベントを添付します。次に例を示します。

$('#header, #content, #footer').click(function(){
    $('.form_wrapper').hide();
});

これはタッチデバイスでも動作します。セレクタのリストに.form_wrapperの親が含まれていないことを確認してください。

2
ThornberryPie
$(document).ready(function() {
        $('.modal-container').on('click', function(e) {
          if(e.target == $(this)[0]) {
                $(this).removeClass('active'); // or hide()
          }
        });
});
.modal-container {
        display: none;
        justify-content: center;
        align-items: center;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: rgba(0,0,0,0.5);
        z-index: 999;
}

.modal-container.active {
    display: flex;  
}

.modal {
        width: 50%;
        height: auto;
        margin: 20px;
        padding: 20px;
        background-color: #fff;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="modal-container active">
        <div class="modal">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ac varius purus. Ut consectetur viverra nibh nec maximus. Nam luctus ligula quis arcu accumsan euismod. Pellentesque imperdiet volutpat mi et cursus. Sed consectetur sed tellus ut finibus. Suspendisse porttitor laoreet lobortis. Nam ut blandit metus, ut interdum purus.</p>
        </div>
</div>
2
RustBeard
 $('body').click(function(event) {
    if (!$(event.target).is('p'))
    {
        $("#e2ma-menu").hide();
    }
});

pは要素名です。 id、クラス、または要素名も渡すことができます。

2
Abhishek

.form_wrapperをクリックした場合はfalseを返します。

$('body').click(function() {
  $('.form_wrapper').click(function(){
  return false
});
   $('.form_wrapper').hide();
});

//$('.form_wrapper').click(function(event){
//   event.stopPropagation();
//});
2
bogo

（prc322の答えに追加するだけです。）

私の場合は、このコードを使用して、ユーザーが適切なタブをクリックしたときに表示されるナビゲーションメニューを非表示にしています。追加の条件を追加すると便利であることがわかりました。コンテナの外側のクリックのターゲットはnota link）です。

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

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

これは私のサイト上のリンクのいくつかがページに新しいコンテンツを追加するためです。この新しいコンテンツがナビゲーションメニューが消えると同時に追加された場合、それはユーザーにとって混乱を招く可能性があります。

2
shngrdnr

あなたがIOSに問題があるなら、mouseupはAppleデバイスで働いていません。

jqueryのmousedown/mouseupはiPad用ですか？

私はこれを使う：

$(document).bind('touchend', function(e) {
        var container = $("YOURCONTAINER");

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

私はこのようにしました：

var close = true;

$(function () {

    $('body').click (function(){

        if(close){
            div.hide();
        }
        close = true;
    })


alleswasdenlayeronclicknichtschliessensoll.click( function () {   
        close = false;
    });

});
1
user2822517
dojo.query(document.body).connect('mouseup',function (e)
{
    var obj = dojo.position(dojo.query('div#divselector')[0]);
    if (!((e.clientX > obj.x && e.clientX <(obj.x+obj.w)) && (e.clientY > obj.y && e.clientY <(obj.y+obj.h))) ){
        MyDive.Hide(id);
    }
});
1
Abed Yaseen
var exclude_div = $("#ExcludedDiv");;  
$(document).click(function(e){
   if( !exclude_div.is( e.target ) )  // if target div is not the one you want to exclude then add the class hidden
        $(".myDiv1").addClass("hidden");  

});

_フィドル_

1
SharmaPattar

非常に多くの答えが、それを追加したために通過の権利でなければなりません...私は現在の（jQuery 3.1.1）答えを見ませんでした - それで：

$(function() {
    $('body').on('mouseup', function() {
        $('#your-selector').hide();
    });
});
1
zak
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("#hide").click(function(){
    $("p").hide();
  });
  $("#show").click(function(){
    $("p").show();
  });
});
</script>
</head>
<body>
<p>If you click on the "Hide" button, I will disappear.</p>
<button id="hide">Hide</button>
<button id="show">Show</button>
</body>
</html>
1
Bhushan wagh

https://sdtuts.com/click-on-not-specified-element/ からコピーしたもの

ライブデモ http://demos.sdtuts.com/click-on-specified-element

$(document).ready(function () {
    var is_specified_clicked;
    $(".specified_element").click(function () {
        is_specified_clicked = true;
        setTimeout(function () {
            is_specified_clicked = false;
        }, 200);
    })
    $("*").click(function () {
        if (is_specified_clicked == true) {
//WRITE CODE HERE FOR CLICKED ON OTHER ELEMENTS
            $(".event_result").text("you were clicked on specified element");
        } else {
//WRITE CODE HERE FOR SPECIFIED ELEMENT CLICKED
            $(".event_result").text("you were clicked not on specified element");
        }
    })
})
1
user3151197

このコードを使用することで、あなたは好きなだけアイテムを隠すことができます。

var boxArray = ["first element's id","second element's id","nth element's id"];
   window.addEventListener('mouseup', function(event){
   for(var i=0; i < boxArray.length; i++){
    var box = document.getElementById(boxArray[i]);
    if(event.target != box && event.target.parentNode != box){
        box.style.display = 'none';
    }
   }
})
1
Mahdi Younesi

docs によると、.blur()は<input>タグ以上の働きをします。例えば：

$('.form_wrapper').blur(function(){
   $(this).hide();
});
0
Bizley

通常のデバイスとタッチデバイスを切り替える

私はしばらく前にここでいくつかの答えを読み、ポップアップバブルとしてdivの機能に使用するいくつかのコードを作成しました。

$('#openPopupBubble').click(function(){
    $('#popupBubble').toggle();

    if($('#popupBubble').css('display') === 'block'){
        $(document).bind('mousedown touchstart', function(e){
            if($('#openPopupBubble').is(e.target) || $('#openPopupBubble').find('*').is(e.target)){
                $(this).unbind(e);
            } 
            else if(!$('#popupBubble').find('*').is(e.target)){
                $('#popupBubble').hide();
                $(this).unbind(e);
            }
        });
    }
});

また、クラスを使用してこれをより抽象的にして、クリックイベントをトリガーしたボタンに基づいて正しいポップアップバブルを選択することもできます。

$('body').on('click', '.openPopupBubble', function(){
    $(this).next('.popupBubble').toggle();

    if($(this).next('.popupBubble').css('display') === 'block'){
        $(document).bind('mousedown touchstart', function(e){
            if($(this).is(e.target) || $(this).find('*').is(e.target)){
                $(this).unbind(e);
            } 
            else if(!$(this).next('.popupBubble').find('*').is(e.target)){
                $(this).next('.popupBubble').hide();
                $(this).unbind(e);
            }
        });
    }
});
0
Sceptic

処理済みのキーワードに応じてオートコンプリートを表示する検索ボックスで作業していました。オプションをクリックしたくない場合、以下のコードを使用して処理済みリストを非表示にします。

$(document).click(function() {
 $('#suggestion-box').html("");
});

提案ボックスは、値を表示しているオートコンプリートコンテナーです。

0
Vivek

クリックイベントをドキュメントにバインドすると、ドロップダウンの外側の何かがクリックされたときにドロップダウンを非表示にしますが、ドロップダウンの内側の何かがクリックされたときに非表示になりません。ドロップダウンを表示します）

    $('.form_wrapper').show(function(){

        $(document).bind('click', function (e) {
            var clicked = $(e.target);
            if (!clicked.parents().hasClass("class-of-dropdown-container")) {
                 $('.form_wrapper').hide();
            }
        });

    });

それを隠したら、クリックイベントをアンバインドします

$(document).unbind('click');
0
jeffsaracco

この解決策はうまくいくはずです、それは簡単です：

jQuery(document).ready(function($) {
    jQuery(document).click(function(event) {
        if(typeof  jQuery(event.target).attr("class") != "undefined") {
            var classnottobeclickforclose = ['donotcountmeforclickclass1', 'donotcountmeforclickclass2','donotcountmeforclickclass3'];
            var arresult = jQuery.inArray(jQuery(event.target).attr("class"), classnottobeclickforclose);
            if (arresult < 0) {
                jQuery(".popup").hide();
            }
        }
    });
});

上記のコード変更donotcountmeforclickclass1、donotcountmeforclickclass2など、ポップアップを表示するために使用していたクラスやクリックポップアップでは効果がないはずですので、ポップアップを開くために使用しているクラスを追加する必要があります。

ポップアップクラスで.popupクラスを変更します。

0
Den Pat