Wie erkenne ich ein klicken Sie außerhalb eines Elements?

Können Sie hören für eine klicken Sie auf Veranstaltung auf document und dann stellen Sie sicher, dass #menucontainer ist nicht ein Vorfahre oder das Ziel des angeklickten element mit .am nächsten().

Wenn es nicht ist, dann das angeklickte element ist außerhalb der #menucontainer - und Sie können sicher verstecken.

$(document).click(function(event) { 
  $target = $(event.target);
  if(!$target.closest('#menucontainer').length && 
  $('#menucontainer').is(":visible")) {
    $('#menucontainer').hide();
  }        
});

Bearbeiten – 2017-06-23

Können Sie auch das clean up nach dem event-listener, wenn Sie planen, schließen Sie das Menü und wollen zu stoppen, warten auf Ereignisse. Diese Funktion wird sauber, nur die neu erstellten listener aus, bewahrt dabei alle anderen auf die Zuhörer auf document. Mit ES2015 syntax:

export function hideOnClickOutside(selector) {
  const outsideClickListener = (event) => {
    $target = $(event.target);
    if (!$target.closest(selector).length && $(selector).is(':visible')) {
        $(selector).hide();
        removeClickListener();
    }
  }

  const removeClickListener = () => {
    document.removeEventListener('click', outsideClickListener)
  }

  document.addEventListener('click', outsideClickListener)
}

Bearbeiten – 2018-03-11

Für diejenigen, die nicht wollen, um jQuery verwenden. Hier ist der obige code in plain vanillaJS (ECMAScript6).

function hideOnClickOutside(element) {
    const outsideClickListener = event => {
        if (!element.contains(event.target) && isVisible(element)) { //or use: event.target.closest(selector) === null
          element.style.display = 'none'
          removeClickListener()
        }
    }

    const removeClickListener = () => {
        document.removeEventListener('click', outsideClickListener)
    }

    document.addEventListener('click', outsideClickListener)
}

const isVisible = elem => !!elem && !!( elem.offsetWidth || elem.offsetHeight || elem.getClientRects().length ) //source (2018-03-11): https://github.com/jquery/jquery/blob/master/src/css/hiddenVisibleSelectors.js 

HINWEIS:
Diese basiert auf Alex Kommentar, nur mit !element.contains(event.target) anstelle der jQuery-Teil.

Aber element.closest() ist jetzt auch erhältlich in allen gängigen Browsern (in der W3C-version unterscheidet sich ein wenig von der jQuery).
Polyfills kann hier gefunden werden: https://developer.mozilla.org/en-US/docs/Web/API/Element/closest

InformationsquelleAutor

Ich habe eine Anwendung, die funktioniert ähnlich wie Eran Beispiel, außer ich lege das click-Ereignis für den Körper, wenn ich öffnen Sie das Menü... Irgendwie so:

$('#menucontainer').click(function(event) {
  $('html').one('click',function() {
    //Hide the menus
  });

  event.stopPropagation();
});

Mehr Informationen auf jQuery ist () - Funktion

InformationsquelleAutor

Gibt es jetzt ein plugin für die: außerhalb von Veranstaltungen (blog-post)

Folgendes geschieht, wenn ein clickoutside handler (WLOG) ist gebunden an ein element:

• das element in ein array eingefügt, das hält alle Elemente, mit clickoutside Handler
• ein (haben) klicken Sie auf handler gebunden ist, um das Dokument (wenn nicht schon vorhanden)
• auf jeden klicken Sie auf in dem Dokument, das clickoutside Ereignis wird ausgelöst für diejenigen, die Elemente im array, die nicht gleich sind, oder ein Elternteil die klicken Sie auf-Veranstaltungen Ziel
• zusätzlich die Veranstaltung.Ziel für die clickoutside Ereignis gesetzt ist, das element der Anwender angeklickt hat (damit Sie auch wissen, was der Benutzer geklickt hat, und nicht nur, dass er geklickt)

Also keine Ereignisse angehalten werden, die Ausbreitung und weitere klicken Sie auf - Handler verwendet werden kann "über" dem element mit außen-handler.

InformationsquelleAutor

Dieser arbeitete für mich perfekt!!

$('html').click(function (e) {
    if (e.target.id == 'YOUR-DIV-ID') {
        //do something
    } else {
        //do something
    }
});

InformationsquelleAutor

Als ein weiteres Plakat sagte, es gibt eine Menge Fallstricke, vor allem, wenn das element, das Sie anzeigen lassen wollen (in diesem Fall ein Menü) hat interaktive Elemente.
Ich habe festgestellt, das folgende Methode Recht robust:

$('#menuscontainer').click(function(event) {
    //your code that shows the menus fully

    //now set up an event listener so that clicking anywhere outside will close the menu
    $('html').click(function(event) {
        //check up the tree of the click target to check whether user has clicked outside of menu
        if ($(event.target).parents('#menuscontainer').length==0) {
            //your code to hide menu

            //this event listener has done its job so we can unbind it.
            $(this).unbind(event);
        }

    })
});

InformationsquelleAutor

Solution1

Anstatt über das Ereignis.stopPropagation() kann einige Nebenwirkungen, nur definieren Sie ein einfaches flag-variable und fügen Sie eine if Zustand. Ich getestet und funktionierte einwandfrei ohne irgendwelche Nebenwirkungen von stopPropagation:

var flag = "1";
$('#menucontainer').click(function(event){
    flag = "0"; //flag 0 means click happened in the area where we should not do any action
});

$('html').click(function() {
    if(flag != "0"){
        //Hide the menus if visible
    }
    else {
        flag = "1";
    }
});

Solution2

Mit nur einem einfachen if Zustand:

$(document).on('click', function(event){
    var container = $("#menucontainer");
    if (!container.is(event.target) &&            //If the target of the click isn't the container...
        container.has(event.target).length === 0) //... nor a descendant of the container
    {
        //Do whatever you want to do when click is outside the element
    }
});

InformationsquelleAutor

Hatte ich Erfolg mit so etwas wie dies:

var $menuscontainer = ...;

$('#trigger').click(function() {
  $menuscontainer.show();

  $('body').click(function(event) {
    var $target = $(event.target);

    if ($target.parents('#menuscontainer').length == 0) {
      $menuscontainer.hide();
    }
  });
});

Die Logik ist: wenn #menuscontainer gezeigt wird, binden Sie einen click-Ereignishandler, um den Körper, verbirgt sich #menuscontainer nur, wenn das Ziel (der klicken) Sie ist nicht ein Kind von ihm.

InformationsquelleAutor

Fand ich diese Methode in einigen jQuery-Kalender-plugin.

function ClickOutsideCheck(e)
{
  var el = e.target;
  var popup = $('.popup:visible')[0];
  if (popup==undefined)
    return true;

  while (true){
    if (el == popup ) {
      return true;
    } else if (el == document) {
      $(".popup").hide();
      return false;
    } else {
      el = $(el).parent()[0];
    }
  }
};

$(document).bind('mousedown.popup', ClickOutsideCheck);

InformationsquelleAutor

Statt mit flow-Unterbrechung, blur/focus event oder jede andere knifflige Technik, einfach match event flow mit dem element Verwandtschaft:

$(document).on("click.menu-outside", function(event){
    //Test if target and it's parent aren't #menuscontainer
    //That means the click event occur on other branch of document tree
    if(!$(event.target).parents().andSelf().is("#menuscontainer")){
        //Click outisde #menuscontainer
        //Hide the menus (but test if menus aren't already hidden)
    }
});

Zu entfernen, klicken Sie außerhalb der Ereignis-listener, einfach:

$(document).off("click.menu-outside");

InformationsquelleAutor

Haken ein click-Ereignis-listener auf das Dokument. Innerhalb der Ereignis-listener können Sie die event-Objekt, insbesondere die event.Ziel, um zu sehen, welches element geklickt wurde:

$(document).click(function(e){
    if ($(e.target).closest("#menuscontainer").length == 0) {
        //.closest can help you determine if the element 
        //or one of its ancestors is #menuscontainer
        console.log("hide");
    }
});

InformationsquelleAutor

Upvote für die beliebteste Antwort, aber fügen Sie

&& (e.target != $('html').get(0)) //ignore the scrollbar

also, klicken Sie auf die scroll-Leiste nicht [ausblenden oder was auch immer] Ihr Ziel-element.

InformationsquelleAutor

Habe ich es so in YUI 3:

//Detect the click anywhere other than the overlay element to close it.
Y.one(document).on('click', function (e) {
    if (e.target.ancestor('#overlay') === null && e.target.get('id') != 'show' && overlay.get('visible') == true) {
        overlay.hide();
    }
});

Ich bin der überprüfung, ob Vorfahr ist nicht das widget-element-container,

wenn das Ziel ist nicht, die öffnen Sie die widget/element

wenn widget/element will ich schließen-ist bereits geöffnet (nicht so wichtig).

InformationsquelleAutor

Habe ich folgenden script mit jQuery.

jQuery(document).click(function(e) {
    var target = e.target; //target div recorded
    if (!jQuery(target).is('#tobehide') ) {
        jQuery(this).fadeOut(); //if the click element is not the above id will hide
    }
})

Unten finden Sie den HTML-code

<div class="main-container">
<div> Hello I am the title</div>
<div class="tobehide">I will hide when you click outside of me</div>
</div>

Können Sie das tutorial Lesen, hier

InformationsquelleAutor