Javascript detectar evento de clic fuera de div

Tengo un div con id = “área de contenido”, cuando un usuario hace clic fuera de este div, me gustaría alertarlos sobre el hecho de que hicieron clic fuera de él. ¿Cómo usaría JavaScript para resolver este problema?

Display Conents

En Javascript puro

¡Mira este violín y mira si eso es lo que buscas!

 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/

Vincula el evento OnClick a un elemento que está fuera de tu área de contenido, por ejemplo, el cuerpo. Luego, dentro del evento, verifique si el objective es el área de contenido o un elemento secundario directo o indirecto del área de contenido . Si no, entonces alerta.

Hice una función que verifica si es un niño o no. Devuelve verdadero si el padre de un nodo es el padre buscado. Si no, entonces verifica si realmente tiene un padre. Si no, entonces devuelve falso. Si tiene un padre, pero no es el buscado, comprueba si el padre del padre es el padre buscado.

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

¡También vea el ejemplo en vivo (content-area = grey)!

El método Node.contains () devuelve un valor booleano que indica si un nodo es un descendiente de un nodo dado o no

Puede atrapar eventos usando

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

Recuerde eliminar el evento escuchado en el lugar correcto

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

Hice una biblioteca js simple y pequeña para hacer esto por usted:

Secuestra el addEventListener nativo, para crear un evento outclick y también tiene un setter en el prototipo para .onoutclick

Uso Básico

Al hacer clic, puede registrar oyentes de eventos en elementos DOM para detectar si se hizo clic en otro elemento que era ese elemento u otro elemento dentro de él. El uso más común de esto está en los menús.

 var menu = document.getElementById('menu') menu.onoutclick = function () { hide(menu) } 

esto también se puede hacer usando el método addEventListener

 var menu = document.getElementById('menu') menu.addEventListener('outclick', function (e) { hide(menu) }) 

Alternativamente, también puede usar el atributo html outclick para activar un evento. Esto no maneja HTML dynamic, y no tenemos planes de agregar eso, aún

 

¡Que te diviertas!

Usa document.activeElement para ver cuál de tus elementos html está activo.

Aquí hay una referencia: document.activeElement en MDN

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

Esto es para el caso de que haga clic dentro del contenedor externo pero fuera del área de contenido .

Aquí está el violín: 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'); } } 

utilice jquery como mejor para el acceso DOM

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

Pon esto en tu documento: