사용자가 외부를 클릭 할 때 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클릭 할 때 더 이상 링크가 작동하지 않는다는 것입니다.

같은 문제가 있었지만이 쉬운 해결책을 생각해 냈습니다. 재귀 적으로 작동합니다.

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

다음과 같은 것을 사용하는 것이 좋습니다.

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

이 코드는 페이지에서 클릭 이벤트를 감지 한 다음 #CONTAINER클릭 한 #CONTAINER요소가 요소 나 하위 요소 중 하나 가 아닌 경우에만 요소 를 숨 깁니다 .

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

stopPropagation에 의존하지 않고 본문에 대해 발생하는 클릭 이벤트의 대상을 점검 할 수 있습니다.

다음과 같은 것 :

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

또한 body 요소는 브라우저에 표시된 전체 시각적 공간을 포함하지 않을 수 있습니다. 클릭이 등록되지 않은 경우 HTML 요소에 대해 클릭 핸들러를 추가해야합니다.

라이브 데모

클릭 영역이 타겟팅 된 요소 또는 하위 요소에 없는지 확인

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

$(document).click(function(event) {
    if ( !$(event.target).hasClass('form_wrapper')) {
         $(".form_wrapper").hide();
    }
});

솔루션을 다음과 같이 업데이트했습니다.

• 대신 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');
    }
});

가장 인기있는 답변을 위한 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

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

이런 식으로 작동하지 않습니까?

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

});

또는

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

});

슬리커 :

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

DOM을 한 번 클릭 할 때마다 하나의 특정 요소를 숨기지 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();
});

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

다음은 다른 스레드에서 찾은 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()
      }
    })

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. 모바일 기능을위한 포함 된 터치 엔드

나는 이것이 누군가를 돕기를 바랍니다!

iOS에 문제가 있으면 Apple 장치에서 mouseup이 작동하지 않습니다.

jquery의 mousedown / mouseup이 ipad에서 작동합니까?

나는 이것을 사용한다 :

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

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

(prc322의 답변에 추가하십시오.)

필자의 경우이 코드를 사용하여 사용자가 적절한 탭을 클릭 할 때 나타나는 탐색 메뉴를 숨기고 있습니다. 컨테이너 외부의 클릭 대상이 링크 가 아닌 추가 조건을 추가하는 것이 유용하다는 것을 알았습니다 .

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

내 사이트의 일부 링크가 페이지에 새 콘텐츠를 추가하기 때문입니다. 탐색 메뉴가 사라지는 동시에이 새 컨텐츠가 추가되면 사용자에게 혼란을 줄 수 있습니다.

너무 많은 답변은 하나를 추가 할 수있는 통과 권이어야합니다 ... 현재 (jQuery 3.1.1) 답변을 보지 못했습니다.

$(function() {
    $('body').on('mouseup', function() {
        $('#your-selector').hide();
    });
});

var n = 0;
$("#container").mouseenter(function() {
n = 0;

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

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

 $('body').click(function(event) {
    if (!$(event.target).is('p'))
    {
        $("#e2ma-menu").hide();
    }
});

p요소 이름입니다. id 또는 클래스 또는 요소 이름도 전달할 수 있습니다.

.form_wrapper를 클릭하면 false를 반환합니다.

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

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

다음과 같이 클릭 이벤트를 양식 랩퍼 외부의 최상위 레벨 요소에 첨부하십시오.

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

터치 장치에서도 작동합니다. 선택기 목록에 .form_wrapper의 부모를 포함시키지 마십시오.

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");  

}); 

깡깡이

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");
        }
    })
})

나는 이것을 이렇게했다 :

var close = true;

$(function () {

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

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


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

});

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);
    }
});

이 코드를 사용하면 원하는만큼 많은 항목을 숨길 수 있습니다

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';
    }
   }
})

할 수있는 일은 클릭 이벤트를 문서에 바인딩하여 드롭 다운 외부의 무언가를 클릭하면 드롭 다운을 숨기지 만 드롭 다운 내부의 무언가를 클릭하면 숨겨지지 않으므로 "쇼"이벤트 (또는 슬라이드 다운 또는 기타 드롭 다운을 보여줍니다)

    $('.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');

워드 프로세서에 따르면 , .blur()이상 작동 <input>태그입니다. 예를 들면 다음과 같습니다.

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