Supongamos que tengo un div en mi página. cómo detectar el clic del usuario en el contenido div o fuera del contenido div a través de JavaScript o JQuery. por favor ayuda con un pequeño fragmento de código. Gracias.
Editar : como se comentó en una de las respuestas a continuación, solo quiero adjuntar un controlador de eventos a mi cuerpo, y también quiero saber en qué elemento se hizo clic.
Aquí hay una línea que no requiere jquery usando Node.contains :
// Get arbitrary element with id "my-element" var myElementToCheckIfClicksAreInsideOf = document.querySelector('#my-element'); // Listen for click events on body document.body.addEventListener('click', function (event) { if (myElementToCheckIfClicksAreInsideOf.contains(event.target)) { console.log('clicked inside'); } else { console.log('clicked outside'); } }); Si se pregunta sobre el caso extremo de verificar si el clic está en el elemento en sí, Node.contains devuelve verdadero para el elemento en sí (por ejemplo element.contains(element) === true ), por lo que este fragmento siempre debería funcionar.
El soporte del navegador parece cubrir casi todo de acuerdo con esa página de MDN también.
Usando jQuery:
$(function() { $("body").click(function(e) { if (e.target.id == "myDiv" || $(e.target).parents("#myDiv").length) { alert("Inside div"); } else { alert("Outside div"); } }); }) #myDiv { background: #ff0000; width: 25vw; height: 25vh; } <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="myDiv"></div>Usando jQuery, y asumiendo que tienes <div id="foo"> :
jQuery(function($){ $('#foo').click(function(e){ console.log( 'clicked on div' ); e.stopPropagation(); // Prevent bubbling }); $('body').click(function(e){ console.log( 'clicked outside of div' ); }); });Editar : para un solo controlador:
jQuery(function($){ $('body').click(function(e){ var clickedOn = $(e.target); if (clickedOn.parents().andSelf().is('#foo')){ console.log( "Clicked on", clickedOn[0], "inside the div" ); }else{ console.log( "Clicked outside the div" ); }); });