programing

클릭 이벤트에서 요소를 요소 외부에 숨기려면 어떻게 해야 합니까?

newstyles 2023. 9. 1. 20:39

클릭 이벤트에서 요소를 요소 외부에 숨기려면 어떻게 해야 합니까?

페이지의 아무 곳이나 클릭하면 보이는 요소를 숨기는 방법이 맞는지 알고 싶습니다.

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

요소의 경계 내에서 클릭 이벤트가 발생할 때 요소(div, span 등)가 사라지면 안 됩니다.

내가 이해한다면, 당신은 당신이 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를 클릭하면 클릭 이벤트가 취소됩니다.

사용해 보세요.

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

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

  });
});

ID 대신 클래스 이름을 사용합니다. 왜냐하면 asp.net 에서는 ID에 추가적인 .net 연결에 대해 걱정해야 하기 때문입니다.

편집 - 다른 조각을 추가했으므로 다음과 같이 작동합니다.

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

  });
});

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(참조: 문서) 그러나 여기에 해당되지 않는 조건을 핸들러 내에서 수행해야 하기 때문입니다.

다음 코드 예제는 저에게 가장 적합한 것 같습니다.하지만 당신은 디브나 그 아이들에 대해 그 이벤트의 모든 처리를 중지하는 '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>

고마워, 토마스.저는 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>

또한 다음과 같은 작업을 수행할 수 있습니다.

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

  var container = $("div");

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

   }

});

목표값이 div가 아니면 div 길이가 0인지 확인하여 div를 숨깁니다.

저는 아래와 같이 했습니다.다른 사람도 혜택을 받을 수 있도록 공유할 생각입니다.

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

제가 이 일에 대해 누군가를 도울 수 있으면 알려주세요.

  $(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_inputin은 텍스트 상자의 이름이고 .suggest_container는 ul 클래스 이름이며 .suggest_div는 자동 제안의 주 div 요소입니다.

이 코드는 화면의 아무 곳이나 클릭하여 div 요소를 숨기기 위한 것입니다.모든 작업을 수행하기 전에 코드를 이해하고 복사하십시오.

사용해 보십시오.

 $(document).mouseup(function (e) {
    var div = $("#yourdivid");
    if (!div.is(e.target) && div.has(e.target).length === 0) 
    {
       div.hide();
     }
    });

자식이 아닌 요소에서 클릭이 발생할 때 컨테이너 div를 숨기는 다른 방법;

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

이거 먹어봐요, 저한테 딱 맞아요.

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

$('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/

다음은 Sandeep Pal의 답변을 기반으로 작동하는 CSS/small 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/

이것은 작동하지 않습니다. 당신이 .myDIV 내부를 클릭하면 .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>

위의 제안에 대한 2가지 작은 개선 사항:

  • 문서의 바인딩을 해제합니다. 완료되면 클릭합니다.

  • 클릭 한 번으로 가정하여 이를 트리거한 이벤트에 대한 전파

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


$(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>

$( "element" ).focusout(function() {
    //your code on element
})

이것은 위의 다른 솔루션으로 만들어졌습니다.

$(document).ready(function(){  

    $("button").click(function(event){
        $(".area").toggle();
        event.stopPropagation();    //stops the click event to go "throu" the button an hit the document
    });
    
    
    $(document).click(function() {
        $(".area").hide();
    });
    
    
    $(".interface").click(function(event) {
        event.stopPropagation();
        return false;                                        
    });
});


<div>
    <div>
        <button> Press here for content</button> 
      <div class="area">
        <div class="interface"> Content</div>
      </div>
    </div>       
</div>

$(document).click(function() {
  var container = $("#container");
  if (!container.is(event.target) &&
    !container.has(event.target).length) {
    container.hide();
  }
});



$(document).mouseup(function (e)
{
    var mydiv = $('div#mydiv');
    if (!mydiv.is(e.target) && mydiv.has(e.target).length === 0){
       search.slideUp();
    }
});

간단한 해결책: 클릭 이벤트에서 특정 요소가 아닌 다른 곳으로 요소를 숨깁니다.

$(document).on('click', function () {
                $('.element').hide();
            });
            //element will not Hide on click some specific control inside document
            $('.control-1').on('click', function (e) {
                e.stopPropagation();
            });

언급URL : https://stackoverflow.com/questions/714471/how-do-i-hide-an-element-on-a-click-event-anywhere-outside-of-the-element

'programing' 카테고리의 다른 글

Spring MVC에서 AJAX를 사용하여 뷰를 렌더링하는 방법  (0) 2023.09.01
SHA256 in swift  (0) 2023.09.01
클래스 조각을 부풀리는 중 오류 발생  (0) 2023.09.01
MariaDB 데이터베이스에 대한 쿼리 동기화  (0) 2023.09.01
해시방 URL로 페이스북 공유/좋아요를 처리하는 방법은 무엇입니까?  (0) 2023.09.01

'programing'의 다른글

  • 현재글클릭 이벤트에서 요소를 요소 외부에 숨기려면 어떻게 해야 합니까?

관련글

댓글

티스토리툴바