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

นอกจากนี้องค์ประกอบของร่างกายอาจไม่รวมพื้นที่ภาพทั้งหมดที่แสดงในเบราว์เซอร์ หากคุณสังเกตเห็นว่าการคลิกของคุณไม่ได้ลงทะเบียนคุณอาจต้องเพิ่มตัวจัดการการคลิกสำหรับองค์ประกอบ HTML แทน

สาธิตสด

ตรวจสอบพื้นที่การคลิกไม่ได้อยู่ในองค์ประกอบเป้าหมายหรืออยู่ในระดับย่อย

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

UPDATE:

การแพร่กระจายหยุด 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/contain

การสาธิตสดพร้อม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();
});

และสำหรับอุปกรณ์ Touch เช่น 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. วางไว้ภายในฟังก์ชันที่มีการโทรกลับด้วย args "unlimited"
2. เพิ่มการเรียกไปยัง. off () ของ jquery ที่จับคู่กับเนมสเปซเหตุการณ์เพื่อยกเลิกการผูกเหตุการณ์จากเอกสารเมื่อมีการเรียกใช้
3. touchend รวมถึงฟังก์ชั่นมือถือ

ฉันหวังว่านี่จะช่วยให้ใครบางคน!

หากคุณมีปัญหากับ iOS, mouseup ไม่ทำงานบนอุปกรณ์แอปเปิ้ล

mousedown / mouseup ใน jquery ทำงานกับ 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:

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