webentwicklung-frage-antwort-db.com.de

Javascript Click-Ereignis außerhalb von div erkennen

Ich habe ein div mit id = "content-area", wenn ein Benutzer außerhalb dieses div klickt, möchte ich ihn darauf aufmerksam machen, dass er außerhalb geklickt hat. Wie würde ich JavaScript verwenden, um dieses Problem zu lösen?

<div id = "outer-container">
   <div id = "content-area">
      Display Conents 
   </div>
</div>
14
Dibish

In reinem Javascript

Schauen Sie sich diese Geige an und sehen Sie, ob Sie danach streben!

document.getElementById('outer-container').onclick = function(e) {
    if(e.target != document.getElementById('content-area')) {
        document.getElementById('content-area').innerHTML = 'You clicked outside.';          
    } else {
        document.getElementById('content-area').innerHTML = 'Display Contents';   
    }
}

http://jsfiddle.net/DUhP6/2/

22
jollelj

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!

11
Butt4cak3

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)
6
Jan Vorcak

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ß!

5
Joe Thomas

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

Hier ist eine Referenz: document.activeElement in MDN

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

1
TomNg

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


}
0
Pimento Web

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");
});
0
Ronak Patel

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>
0
Simon Rigét