ฉันจะซ่อนองค์ประกอบในเหตุการณ์การคลิกที่ใดก็ได้นอกองค์ประกอบได้อย่างไร

121

ฉันต้องการทราบว่านี่เป็นวิธีที่ถูกต้องในการซ่อนองค์ประกอบที่มองเห็นได้หรือไม่เมื่อคลิกที่ใดก็ได้บนหน้า

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

องค์ประกอบ (div, span ฯลฯ ) ไม่ควรหายไปเมื่อเหตุการณ์คลิกเกิดขึ้นภายในขอบเขตขององค์ประกอบ

jquery events event-bubbling

— Franek
แหล่งที่มา

204

ถ้าฉันเข้าใจคุณต้องการซ่อน 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 ที่เป็นปัญหาการคลิกจะยกเลิกเหตุการณ์การคลิก

— เจเรมีบี
แหล่งที่มา

1

มันใช้งานได้ดี .. แต่เมื่อฉันคลิกที่ปุ่มที่เรียกป๊อปอัปป๊อปอัปจะมาจากนั้นอีกครั้งจะหายไปทันที สิ่งที่ต้องทำเนื่องจากเอกสารกำลังดำเนินการสองอย่างพร้อมกัน เพื่อเรียกป๊อปอัปเมื่อคลิกร่างกายและจางออกจากป๊อปอัปบนร่างกายคลิก

— Veer Shrivastav

@VeerShrivastav เหมือนกันที่นี่ e.stopPropagation (); จะหยุดตัวจัดการคลิกทั้งหมด

— brunodd

สิ่งนี้จะใช้ไม่ได้ใน Safari หากคุณมีองค์ประกอบอื่น ๆ ใน.myDivองค์ประกอบ .myDivตัวอย่างเช่นถ้าคุณมีให้เลือกภายในแบบเลื่อนลง เมื่อคุณคลิกเลือกระบบจะคิดว่าคุณคลิกนอกกรอบ

— CodeGodie

25

ลองทำตามนี้

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

แก้ไข - เนื่องจากคุณเพิ่มชิ้นส่วนอื่นมันจะได้ผลดังนี้:

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

  });
});

— TStamper
แหล่งที่มา

22

เนื่องจาก jQuery 1.7 มีวิธีใหม่ในการจัดการกับเหตุการณ์ต่างๆ ฉันคิดว่าฉันจะตอบที่นี่เพียงเพื่อแสดงให้เห็นว่าฉันจะทำแบบนี้ "ใหม่" ได้อย่างไร หากคุณไม่ได้ผมขอแนะนำให้คุณอ่านเอกสาร 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( ดู: เอกสาร ) แต่เนื่องจากเราจำเป็นต้องทำเงื่อนไขภายในตัวจัดการที่ไม่สามารถใช้ได้ที่นี่

— เบนเทย์เลอร์
แหล่งที่มา

14

ตัวอย่างโค้ดต่อไปนี้ดูเหมือนจะทำงานได้ดีที่สุดสำหรับฉัน ในขณะที่คุณสามารถใช้ 'return false' ที่หยุดการจัดการเหตุการณ์นั้นทั้งหมดสำหรับ div หรือรายการย่อย ๆ หากคุณต้องการมีการควบคุมบน 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>

6

ขอบคุณโทมัส ฉันเพิ่งเริ่มใช้ JS และฉันคิดหาวิธีแก้ปัญหาอย่างบ้าคลั่ง ช่วยด้วย

ฉันใช้ jquery เพื่อสร้างกล่องล็อกอินที่เลื่อนลง เพื่อประสบการณ์การใช้งานที่ดีที่สุดฉันต้องการให้กล่องหายไปเมื่อผู้ใช้คลิกที่ใดที่หนึ่งยกเว้นกล่อง ฉันรู้สึกอายเล็กน้อยที่ใช้เวลาประมาณสี่ชั่วโมงในการแก้ไขปัญหานี้ แต่เดี๋ยวก่อนฉันยังใหม่กับ 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>

— ทอมมี่
แหล่งที่มา

5

สิ่งที่คุณสามารถทำได้คือ:

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

  var container = $("div");

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

   }

});

หากเป้าหมายของคุณไม่ใช่ div ให้ซ่อน div โดยการตรวจสอบความยาวเท่ากับศูนย์

— Sandeep Pal
แหล่งที่มา

5

ฉันทำด้านล่าง คิดว่าจะแบ่งปันเพื่อให้คนอื่นได้รับประโยชน์ด้วย

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

โปรดแจ้งให้เราทราบหากสามารถช่วยเหลือใครบางคนได้

— foxybagga
แหล่งที่มา

รหัสที่ดีและไม่ดำเนินการหากdiv#newButtonDivไม่ได้คลิก ฉันอยากจะแนะนำให้คุณลบอันที่สอง.click()ในบรรทัดที่ 4 (หากคุณทำเช่นนี้อย่าลืมถอดวงเล็บปีกกาปิดวงเล็บและเครื่องหมายอัฒภาค - บรรทัดที่ 9)

— aullah

4

ลองสิ่งนี้:

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

— นาลันมาเดสวาราน
แหล่งที่มา

3

อีกวิธีในการซ่อน div คอนเทนเนอร์เมื่อเกิดการคลิกในองค์ประกอบที่ไม่ใช่ลูก

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

— เรนาโตกามา
แหล่งที่มา

3

  $(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 คือชื่อของ textbox และ .uggest_container คือชื่อคลาส ul และ .uggest_div เป็นองค์ประกอบ div หลักสำหรับการแนะนำอัตโนมัติของฉัน

รหัสนี้ใช้สำหรับซ่อนองค์ประกอบ div โดยคลิกที่ใดก็ได้ในหน้าจอ ก่อนที่จะทำทุกอย่างโปรดเข้าใจรหัสและคัดลอก ...

— Shaikh Arbaaz
แหล่งที่มา

2

ลองดูสิมันใช้งานได้ดีสำหรับฉัน

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

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

นี่คือโซลูชัน CSS / JS ขนาดเล็กที่ใช้งานได้ตามคำตอบของ Sandeep Pal:

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

ลองใช้งานโดยคลิกช่องทำเครื่องหมายจากนั้นด้านนอกเมนู:

https://jsfiddle.net/qo90txr8/

— Bjoerg
แหล่งที่มา

1

วิธีนี้ใช้ไม่ได้ - จะซ่อน. 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>

— Franek
แหล่งที่มา

ดังนั้นคุณต้องการให้ div แสดงเมื่อวางลิงก์จากนั้นนำ e.stopPropa .. ออกจากที่นั่นแล้วทำตามตัวเลือกของฉัน

— TStamper

1

การปรับปรุงคำแนะนำข้างต้นเพียง 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();
});

— commonpike
แหล่งที่มา

1

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

ขยายข้อมูลโค้ด

— Ehsan KHAN
แหล่งที่มา

0

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

— จาฟาร์ชูปัน
แหล่งที่มา

5

แม้ว่ารหัสนี้จะช่วยแก้ปัญหาได้ แต่การอธิบายจะช่วยปรับปรุงคุณภาพของโพสต์ของคุณได้มาก

— Shree

0

สิ่งนี้สร้างขึ้นจากโซลูชันอื่น ๆ ด้านบน

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

— นิลส์
แหล่งที่มา

-1

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

— โมฮัมหมัดกิติปาซัน
แหล่งที่มา

-1

วิธีแก้ปัญหาง่ายๆ: ซ่อนองค์ประกอบในเหตุการณ์การคลิกที่ใดก็ได้นอกองค์ประกอบเฉพาะบางอย่าง

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

— ซุปเปอร์โมเดล
แหล่งที่มา