Javascript Click-Ereignis außerhalb von div erkennen

Binden Sie das onClick-Event an ein Element, das sich außerhalb Ihres Inhaltsbereichs befindet, z. der Körper. Überprüfen Sie anschließend im Ereignis, ob das Ziel der Inhaltsbereich ist oder ein direktes oder indirektes untergeordnetes Element des Inhaltsbereichs. Wenn nicht, dann Alarm.

Ich habe eine Funktion erstellt, die prüft, ob es ein Kind ist oder nicht. Sie gibt true zurück, wenn das übergeordnete Element eines Knotens das durchsuchte übergeordnete Element ist. Wenn nicht, wird geprüft, ob es tatsächlich einen Elternteil hat. Wenn nicht, wird falsch zurückgegeben. Wenn es ein Elternteil hat, aber nicht das durchsuchte, prüft es, ob das Elternteil das Elternteil ist.

function isChildOf(child, parent) {
    if (child.parentNode === parent) {
      return true;
    } else if (child.parentNode === null) {
      return false;
    } else {
      return isChildOf(child.parentNode, parent);
    }
}

Schauen Sie sich auch das Live-Beispiel (Inhaltsbereich = grau) an!

Die Methode Node.contains () gibt einen booleschen Wert zurück, der angibt, ob ein Knoten ein Nachkomme eines bestimmten Knotens ist oder nicht

Sie können Ereignisse mit fangen

document.addEventListener("click", clickOutside, false);
function clickOutside(e) {
   const inside = document.getElementById('content-area').contains(e.target);
}

Denken Sie daran, das Ereignis zu entfernen, das an der richtigen Stelle gehört wurde 

document.removeEventListener("click", clickOutside, false)

Ich habe ein einfaches und kleines js library erstellt, um dies für Sie zu tun:

Es übernimmt den nativen addEventListener, um ein Outclick-Ereignis zu erstellen, und hat auch einen Setter für den Prototyp für .onoutclick

Grundnutzung

Mit Outclick können Sie Ereignis-Listener für DOM-Elemente registrieren, um festzustellen, ob auf ein anderes Element, das dieses Element war, oder ein anderes Element in diesem Element angeklickt wurde. Die häufigste Verwendung davon ist in Menüs.

var menu = document.getElementById('menu')

menu.onoutclick = function () {
    hide(menu)
}

dies kann auch mit der addEventListener-Methode erfolgen

var menu = document.getElementById('menu')

menu.addEventListener('outclick', function (e) {
    hide(menu)
})

Alternativ können Sie auch das html-Attribut outclick verwenden, um ein Ereignis auszulösen. Dies behandelt kein dynamisches HTML, und wir haben noch keine Pläne, dies hinzuzufügen

<div outclick="someFunc()"></div>

Habe Spaß!

Verwenden Sie document.activeElement, um zu sehen, welches Ihrer HTML-Elemente aktiv ist.

Hier ist eine Referenz: document.activeElement in MDN

$('#outer-container').on('click', function (e) {
     if (e.target === this) {
        alert('clicked outside');
     }
});

Dies ist für den Fall, dass Sie in den outer-container klicken, jedoch außerhalb des content-area .

Hier ist die Geige: http://jsfiddle.net/uQAMm/1/

$('#outercontainer:not(#contentarea)').on('click', function(event){df(event)} );
function df(evenement)
{
    var xstart = $('#contentarea').offset().left;
    var xend = $('#contentarea').offset().left + $('#contentarea').width();

    var ystart = $('#contentarea').offset().top;
    var yend = $('#contentarea').offset().top + $('#contentarea').height(); 

    var xx = evenement.clientX;
    var yy = evenement.clientY;

    if ( !(  ( xx >=  xstart && xx <=  xend ) && ( yy >=  ystart && yy <=  yend )) )
    {
        alert('out');
    }


}

verwenden Sie jquery als das Beste für den DOM-Zugriff

$(document).click(function(e){
 if($(e.target).is("#content-area") || $(e.target).closest("#content-area").length)
  alert("inside content area");
else alert("you clicked out side content area");
});

Fügen Sie dies in Ihr Dokument ein:

<script>
document.onclick = function(e) {
  if(e.target.id != 'content-area') alert('you clicked outside of content area');
}
</script>