Quiero que se cierre una ventana solo cuando se hace clic en pop_up (en lugar de hacer clic en contenido div). P.ej. Al hacer clic en la capa de fondo, se oculta el div. En el siguiente código, no quiero que se cierre #pop_up al hacer clic en el bot de contenido div solo en "pop_up".

¿Cómo puedo hacer esto?

$("#pop_up").click(function() {
    $("#pop_up").hide();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="pop_up">
  <div id="pop_up_content">
    <h1> world </h1>
  </div>
</div>
6
Tomislav Tomi Nikolic 14 ene. 2017 a las 23:03

3 respuestas

La mejor respuesta

Puede usar el argumento event del clic y ver si el clic está dentro de otro elemento (o si es el elemento mismo)

JSFiddle: https://jsfiddle.net/32mz2x3x/1/

$("#pop_up").click(function(event) {
      if ($(event.target).parents().andSelf().is('#pop_up_content')) {
        return 
    }
    $("#pop_up").hide();
});

He usado parents para verificar si dónde haces clic está dentro del elemento pop_up_content, y he usado andSelf porque quizás hagas clic en #pop_up_content (y no dentro de él)


Más información:

3
Aminadav Glickshtein 14 ene. 2017 a las 20:28

Lo que está experimentando es el comportamiento burbujeante y capturador de los eventos. Verifique esta respuesta ¿Qué es el burbujeo y la captura de eventos?.

El enfoque más simple sería adjuntar un onClick al niño y detener el burbujeo.

$("#pop_up_content").click(function(ev) {
   ev.preventDefault()
   ev.stopImmediatePropagation() // best to use to stop other event listeners from being called
});
6
Community 23 may. 2017 a las 12:33

Use el formulario que permite un selector de filtro, combinado con :not():

$("#pop_up").on('click', ':not(#pop_up_content)', function (e) {
    $("#pop_up").hide();
});
2
Scott Weaver 14 ene. 2017 a las 20:09