사용자가 외부에서 클릭 할 때 사용 jQuery를가 DIV를 숨기려면

해결법

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

2.당신은 더 나은이 같은 갈 것입니다 :

당신은 더 나은이 같은 갈 것입니다 :

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

3.이 코드는 페이지의 모든 클릭 이벤트를 인식하여 #CONTAINER 요소를 숨기는 경우 및 클릭 한 요소가 #CONTAINER 요소이나 그 자손 중 하나가 아니였다 경우에만 가능합니다.

이 코드는 페이지의 모든 클릭 이벤트를 인식하여 #CONTAINER 요소를 숨기는 경우 및 클릭 한 요소가 #CONTAINER 요소이나 그 자손 중 하나가 아니였다 경우에만 가능합니다.
```
$(document).on('click', function (e) {
    if ($(e.target).closest("#CONTAINER").length === 0) {
        $("#CONTAINER").hide();
    }
});
```
4.당신은 클릭 이벤트의 대상을 확인 할 수 있습니다 대신 인 stopPropagation에 의존 몸에 발생합니다.

당신은 클릭 이벤트의 대상을 확인 할 수 있습니다 대신 인 stopPropagation에 의존 몸에 발생합니다.

뭔가 같은 :
```
$("body").click
(
  function(e)
  {
    if(e.target.className !== "form_wrapper")
    {
      $(".form_wrapper").hide();
    }
  }
);
```
또한, 상기 본체 부재는 브라우저에 표시된 전체 영상 공간을 포함하지 않을 수있다. 당신이 당신의 클릭이 등록되지 않습니다 통지하는 경우, 대신 HTML 요소에 대한 클릭 처리기를 추가해야 할 수도 있습니다.

5.라이브 데모

라이브 데모

확인을 클릭 영역은 대상 요소에 또는의 아이가 아닌

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

6.

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

7.솔루션에 대한 업데이트 :

솔루션에 대한 업데이트 :

VAR mouseOverActiveElement 거짓 =;

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

8.가장 인기있는 답변 jQuery를없는 솔루션 :

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

9.ESC 기능을 갖춘 라이브 데모

ESC 기능을 갖춘 라이브 데모

데스크탑 및 모바일 모두에서 작동
```
var notH = 1,
    $pop = $('.form_wrapper').hover(function(){ notH^=1; });

$(document).on('mousedown keydown', function( e ){
  if(notH||e.which==27) $pop.hide();
});
```
어떤 경우에 당신은 당신이 문서에 클릭을 할 때 요소가 정말 보이도록 할 필요가있는 경우 : $ 팝 : ( '보이는') && (notH || e.which == 27) $ pop.is () 경우 .숨는 장소();

10.이 작품 같은 것을하지 않을까요?

이 작품 같은 것을하지 않을까요?

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

});

또는

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

});

11.이벤트 스피커 :

이벤트 스피커 :

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

12.대신 숨기기 하나의 특정 요소에 대한 DOM의 모든 번의 클릭을 듣고, 당신은
부모에게의 tabindex를 설정할 수와 대한 focusOut 이벤트를 수신.

대신 숨기기 하나의 특정 요소에 대한 DOM의 모든 번의 클릭을 듣고, 당신은
부모에게의 tabindex를 설정할 수와 대한 focusOut 이벤트를 수신.

tabIndex를 설정하면 흐림 이벤트가
(일반적으로 그렇지 않은 것)에 발사되어 있는지 확인합니다.

당신의 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();
});
```

13.그리고 아이 패드 및 아이폰과 같은 터치 장치에 대해 우리는 다음과 같은 코드를 사용할 수 있습니다

그리고 아이 패드 및 아이폰과 같은 터치 장치에 대해 우리는 다음과 같은 코드를 사용할 수 있습니다

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

14.여기에 내가 다른 스레드에서 발견 jsfiddle은의도 esc 키와 함께 작동 : http://jsfiddle.net/S5ftb/404

여기에 내가 다른 스레드에서 발견 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()
      }
    })

15.prc322의 멋진 대답의 오프 내장.

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

이것은 몇 가지를 추가 ...

나는이 사람을 도움이되기를 바랍니다!

16.당신은 IOS에 문제가있는 경우, mouseup에 사과 장치에서 작동하지 않습니다.

당신은 IOS에 문제가있는 경우, mouseup에 사과 장치에서 작동하지 않습니다.

아이 패드에 대한 mousedown / mouseup에 jQuery에 작동합니까?

내가 이것을 사용 :
```
$(document).bind('touchend', function(e) {
        var container = $("YOURCONTAINER");

          if (container.has(e.target).length === 0)
          {
              container.hide();
          }
      });
```
17.(그냥 prc322의 대답에 추가.)

(그냥 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();
    }
});
```
내 사이트에있는 링크 중 일부는 페이지에 새로운 내용을 추가하기 때문이다. 이 새로운 콘텐츠가 동시에 추가하면 탐색 메뉴는 사용자에 대한 disorientating 될 수 사라집니다.
18.많은 답변 그래서, 통로의 오른쪽 하나를 추가 할 수 있어야합니다 ... 나는 대답 전류 (jQuery를 3.1.1)를 참조하지 않았다 - 그래서 :

많은 답변 그래서, 통로의 오른쪽 하나를 추가 할 수 있어야합니다 ... 나는 대답 전류 (jQuery를 3.1.1)를 참조하지 않았다 - 그래서 :
```
$(function() {
    $('body').on('mouseup', function() {
        $('#your-selector').hide();
    });
});
```

19.

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

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

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

20.
```
 $('body').click(function(event) {
    if (!$(event.target).is('p'))
    {
        $("#e2ma-menu").hide();
    }
});
```
p는 요소 이름입니다. 어디 하나가 또한 ID 또는 클래스 또는 요소 이름을 전달할 수 있습니다.

21.반환 거짓 당신은 .form_wrapper를 클릭하면 :

반환 거짓 당신은 .form_wrapper를 클릭하면 :

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

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

22.예를 들어 양식 래퍼 외부 최상위 요소에 클릭 이벤트를 붙이는 :

예를 들어 양식 래퍼 외부 최상위 요소에 클릭 이벤트를 붙이는 :
```
$('#header, #content, #footer').click(function(){
    $('.form_wrapper').hide();
});
```
이것은 또한 터치 장치에서 작동, 그냥 당신이 선택기의 목록에 .form_wrapper의 부모를 포함하지 않는 것.
23.VAR exclude_div = $ ( "# ExcludedDiv"); $ (문서) .click (기능 (전자) { 만약 대상 사업부는 숨겨진 클래스를 추가 한 후 제외 할 사람이없는 경우 (! exclude_div.is (e.target)) // $ ( ". myDiv1") addClass ( "숨겨."); });

VAR exclude_div = $ ( "# ExcludedDiv"); $ (문서) .click (기능 (전자) { 만약 대상 사업부는 숨겨진 클래스를 추가 한 후 제외 할 사람이없는 경우 (! exclude_div.is (e.target)) // $ ( ". myDiv1") addClass ( "숨겨."); });

깡깡이
24.$ (문서) 준비 (함수 () { $ ( '. Modal.html 용기').에 ( '클릭'기능 (전자) { 경우 (e.target == $ (이) [0]) { $ (이) .removeClass ( '활성'); // 또는 숨기기 () } }); }); .modal 컨테이너 { 표시 : 없음; 정당화 - 내용 : 없음; 항목 - 정렬 : 센터; 위치 : 절대; 최고 : 0; 왼쪽 : 0; 오른쪽 : 0; 바닥 : 0; 배경 색상 : RGBA (0,0,0,0.5); Z- 색인 : 999; } {- .modal container.active , 곡선을 표시; } {.modal 폭 : 50 %; 높이 : 자동; 여백 : 20 픽셀; 패딩 : 20 픽셀; 배경색: #; } <스크립트 SRC = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
<사업부 클래스 = "모달">
로렘 입숨 당근, 생태 토마토 수프. Aenean 교류 lectus의 molestie. consectetur의 adipiscing 작업 UT, 위대한 사람이 있습니다. 예약 슬픔, 하나의 레이어 실적 호. 주말, 내 아이 자금 조달 및 실행. SED consectetur SED TELLUS UT의 단부. Laoreet 항공 정책을 강조한다. 두려움 앉아 때로는 고추.

$ (문서) 준비 (함수 () { $ ( '. Modal.html 용기').에 ( '클릭'기능 (전자) { 경우 (e.target == $ (이) [0]) { $ (이) .removeClass ( '활성'); // 또는 숨기기 () } }); }); .modal 컨테이너 { 표시 : 없음; 정당화 - 내용 : 없음; 항목 - 정렬 : 센터; 위치 : 절대; 최고 : 0; 왼쪽 : 0; 오른쪽 : 0; 바닥 : 0; 배경 색상 : RGBA (0,0,0,0.5); Z- 색인 : 999; } {- .modal container.active , 곡선을 표시; } {.modal 폭 : 50 %; 높이 : 자동; 여백 : 20 픽셀; 패딩 : 20 픽셀; 배경색: #; } <스크립트 SRC = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
<사업부 클래스 = "모달">
로렘 입숨 당근, 생태 토마토 수프. Aenean 교류 lectus의 molestie. consectetur의 adipiscing 작업 UT, 위대한 사람이 있습니다. 예약 슬픔, 하나의 레이어 실적 호. 주말, 내 아이 자금 조달 및 실행. SED consectetur SED TELLUS UT의 단부. Laoreet 항공 정책을 강조한다. 두려움 앉아 때로는 고추.

25.https://sdtuts.com/click-on-not-specified-element/에서 복사

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

26.당신이 할 수있는 것은 바인딩 드롭 다운 밖에서 뭔가가 클릭하면 드롭 다운을 숨길 문서에 클릭 이벤트,하지만 드롭 다운 안에 뭔가가 클릭하면 그것을 숨길하지 않을 것이다, 당신의 "쇼"이벤트 (또는 slidedown 또는 무엇이든 그렇게 표시 드롭)

당신이 할 수있는 것은 바인딩 드롭 다운 밖에서 뭔가가 클릭하면 드롭 다운을 숨길 문서에 클릭 이벤트,하지만 드롭 다운 안에 뭔가가 클릭하면 그것을 숨길하지 않을 것이다, 당신의 "쇼"이벤트 (또는 slidedown 또는 무엇이든 그렇게 표시 드롭)
```
    $('.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');
```

27.나는 이런 식으로했다 :

나는 이런 식으로했다 :

var close = true;

$(function () {

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

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


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

});

28.

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

29.당신이 원하는대로이 코드를 사용하여 당신은 많은 항목으로 숨길 수 있습니다

당신이 원하는대로이 코드를 사용하여 당신은 많은 항목으로 숨길 수 있습니다

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

30.워드 프로세서에 따르면, .blur ()은 태그 이상 작동한다. 예를 들면 :

워드 프로세서에 따르면, .blur ()은 태그 이상 작동한다. 예를 들면 :
```
$('.form_wrapper').blur(function(){
   $(this).hide();
});
```

from https://stackoverflow.com/questions/1403615/use-jquery-to-hide-a-div-when-the-user-clicks-outside-of-it by cc-by-sa and MIT license

'JQUERY' 카테고리의 다른 글

[JQUERY] 체크 박스가 jQuery를 체크 여부를 어떻게 확인합니까? (0)	2020.09.21
[JQUERY] 요소의 외부 HTML을 선택하기 (0)	2020.09.21
[JQUERY] 어떻게 마이크로 소프트 JSON 날짜를 포맷합니까? (0)	2020.09.21
[JQUERY] jQuery로 미리로드 이미지 (0)	2020.09.21
[JQUERY] 오류 SecurityError는 : 크로스 원점 프레임 액세스 원점으로 프레임을 차단 (0)	2020.09.21

복붙노트

[JQUERY] 사용자가 외부에서 클릭 할 때 사용 jQuery를가 DIV를 숨기려면

사용자가 외부에서 클릭 할 때 사용 jQuery를가 DIV를 숨기려면

해결법

1.동일한 문제가 있었다,이 쉬운 솔루션 함께했다. 심지어 재귀를 일하고 :

2.당신은 더 나은이 같은 갈 것입니다 :

3.이 코드는 페이지의 모든 클릭 이벤트를 인식하여 #CONTAINER 요소를 숨기는 경우 및 클릭 한 요소가 #CONTAINER 요소이나 그 자손 중 하나가 아니였다 경우에만 가능합니다.

4.당신은 클릭 이벤트의 대상을 확인 할 수 있습니다 대신 인 stopPropagation에 의존 몸에 발생합니다.

5.라이브 데모

6.

7.솔루션에 대한 업데이트 :

8.가장 인기있는 답변 jQuery를없는 솔루션 :

9.ESC 기능을 갖춘 라이브 데모

10.이 작품 같은 것을하지 않을까요?

11.이벤트 스피커 :

12.대신 숨기기 하나의 특정 요소에 대한 DOM의 모든 번의 클릭을 듣고, 당신은
부모에게의 tabindex를 설정할 수와 대한 focusOut 이벤트를 수신.

13.그리고 아이 패드 및 아이폰과 같은 터치 장치에 대해 우리는 다음과 같은 코드를 사용할 수 있습니다

14.여기에 내가 다른 스레드에서 발견 jsfiddle은의도 esc 키와 함께 작동 : http://jsfiddle.net/S5ftb/404

15.prc322의 멋진 대답의 오프 내장.

16.당신은 IOS에 문제가있는 경우, mouseup에 사과 장치에서 작동하지 않습니다.

17.(그냥 prc322의 대답에 추가.)

18.많은 답변 그래서, 통로의 오른쪽 하나를 추가 할 수 있어야합니다 ... 나는 대답 전류 (jQuery를 3.1.1)를 참조하지 않았다 - 그래서 :

19.

20.

21.반환 거짓 당신은 .form_wrapper를 클릭하면 :

22.예를 들어 양식 래퍼 외부 최상위 요소에 클릭 이벤트를 붙이는 :

23.VAR exclude_div = $ ( "# ExcludedDiv"); $ (문서) .click (기능 (전자) { 만약 대상 사업부는 숨겨진 클래스를 추가 한 후 제외 할 사람이없는 경우 (! exclude_div.is (e.target)) // $ ( ". myDiv1") addClass ( "숨겨."); });

25.https://sdtuts.com/click-on-not-specified-element/에서 복사

27.나는 이런 식으로했다 :

28.

29.당신이 원하는대로이 코드를 사용하여 당신은 많은 항목으로 숨길 수 있습니다

30.워드 프로세서에 따르면, .blur ()은 태그 이상 작동한다. 예를 들면 :

'JQUERY' 카테고리의 다른 글

티스토리툴바

사용자가 외부에서 클릭 할 때 사용 jQuery를가 DIV를 숨기려면

해결법

1.동일한 문제가 있었다,이 쉬운 솔루션 함께했다. 심지어 재귀를 일하고 :

2.당신은 더 나은이 같은 갈 것입니다 :

3.이 코드는 페이지의 모든 클릭 이벤트를 인식하여 #CONTAINER 요소를 숨기는 경우 및 클릭 한 요소가 #CONTAINER 요소이나 그 자손 중 하나가 아니였다 경우에만 가능합니다.

4.당신은 클릭 이벤트의 대상을 확인 할 수 있습니다 대신 인 stopPropagation에 의존 몸에 발생합니다.

5.라이브 데모

6.

7.솔루션에 대한 업데이트 :

8.가장 인기있는 답변 jQuery를없는 솔루션 :

9.ESC 기능을 갖춘 라이브 데모

10.이 작품 같은 것을하지 않을까요?

11.이벤트 스피커 :

12.대신 숨기기 하나의 특정 요소에 대한 DOM의 모든 번의 클릭을 듣고, 당신은 부모에게의 tabindex를 설정할 수와 대한 focusOut 이벤트를 수신.

13.그리고 아이 패드 및 아이폰과 같은 터치 장치에 대해 우리는 다음과 같은 코드를 사용할 수 있습니다

14.여기에 내가 다른 스레드에서 발견 jsfiddle은의도 esc 키와 함께 작동 : http://jsfiddle.net/S5ftb/404

15.prc322의 멋진 대답의 오프 내장.

16.당신은 IOS에 문제가있는 경우, mouseup에 사과 장치에서 작동하지 않습니다.

17.(그냥 prc322의 대답에 추가.)

18.많은 답변 그래서, 통로의 오른쪽 하나를 추가 할 수 있어야합니다 ... 나는 대답 전류 (jQuery를 3.1.1)를 참조하지 않았다 - 그래서 :

19.

20.

21.반환 거짓 당신은 .form_wrapper를 클릭하면 :

22.예를 들어 양식 래퍼 외부 최상위 요소에 클릭 이벤트를 붙이는 :

23.VAR exclude_div = $ ( "# ExcludedDiv"); $ (문서) .click (기능 (전자) { 만약 대상 사업부는 숨겨진 클래스를 추가 한 후 제외 할 사람이없는 경우 (! exclude_div.is (e.target)) // $ ( ". myDiv1") addClass ( "숨겨."); });

25.https://sdtuts.com/click-on-not-specified-element/에서 복사

27.나는 이런 식으로했다 :

28.

29.당신이 원하는대로이 코드를 사용하여 당신은 많은 항목으로 숨길 수 있습니다

30.워드 프로세서에 따르면, .blur ()은 태그 이상 작동한다. 예를 들면 :

'JQUERY' 카테고리의 다른 글

티스토리툴바

12.대신 숨기기 하나의 특정 요소에 대한 DOM의 모든 번의 클릭을 듣고, 당신은
부모에게의 tabindex를 설정할 수와 대한 focusOut 이벤트를 수신.