Весь div кликабелен, но не дочерние элементы

Question

У меня проблемы с созданием кликабельности всего div, но не его дочерних элементов (хотя они должны получать свои события так, как обычно)

Я что-то упускаю здесь очевидное?

https://jsfiddle.net/9Lc3rawk/

HTML

<div id="modal-wrapper">
    <div id="modal">
      <div id="modal-content">
             Test               
      </div>                                                                
    </div>
</div>

JS

$(document).ready(function() {
  $('#modal-wrapper').click(function(e) {
    $('#modal-wrapper').hide();
  });
});

CSS

body {
  background: #9A9E9E;
}

#modal-wrapper {
  position: fixed; /* Stay in place */
  z-index: 899; /* Sit on top */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(255,255,255); /* Fallback color */
  /*background-color: rgba(0,37,81,0.15); /* Black w/ opacity */
  background-color: rgba(255,255,255,0.4); /* Black w/ opacity */

}

#modal {
  border: 1px solid red;
  width: 990px;
  z-index: 999;
  height: 97%;
  border: 1px solid #D9DFDF;
  top:12px;
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  background-color: #fff;
  overflow: scroll;
  -webkit-box-shadow: 2px 2px 5px 0px rgba(204,204,204,0.5);
-moz-box-shadow: 2px 2px 5px 0px rgba(204,204,204,0.5);
box-shadow: 2px 2px 5px 0px rgba(204,204,204,0.5);
}

#modal-content {
  z-index: 1000;
  position:relative;
}

Answer 1

Вы можете добавить охранник, который проверяет, что событие щелчка возникло (target) на #modal-wrapper

$(document).ready(function() {
  $('#modal-wrapper').click(function(e) {
    if (e.target.id === 'modal-wrapper') {
      $('#modal-wrapper').hide();
    }
  });
});

body {
  background: #9A9E9E;
}

#modal-wrapper {
  position: fixed;
  /* Stay in place */
  z-index: 899;
  /* Sit on top */
  left: 0;
  top: 0;
  width: 100%;
  /* Full width */
  height: 100%;
  /* Full height */
  overflow: auto;
  /* Enable scroll if needed */
  background-color: rgb(255, 255, 255);
  /* Fallback color */
  /*background-color: rgba(0,37,81,0.15); /* Black w/ opacity */
  background-color: rgba(255, 255, 255, 0.4);
  /* Black w/ opacity */
}

#modal {
  border: 1px solid red;
  width: 990px;
  z-index: 999;
  height: 97%;
  border: 1px solid #D9DFDF;
  top: 12px;
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  background-color: #fff;
  overflow: scroll;
  -webkit-box-shadow: 2px 2px 5px 0px rgba(204, 204, 204, 0.5);
  -moz-box-shadow: 2px 2px 5px 0px rgba(204, 204, 204, 0.5);
  box-shadow: 2px 2px 5px 0px rgba(204, 204, 204, 0.5);
}

#modal-content {
  z-index: 1000;
  position: relative;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="modal-wrapper">
  <div id="modal">
    <div id="modal-content">
      Test
    </div>
  </div>
</div>

Answer 2

-Вы можете использовать текущую цель, чтобы убедиться, что это элемент-обертка:

$("#modal-wrapper").click( function(e) {
    if(e.target == e.currentTarget) {
        alert('parent ele clicked');
    } else {
        //you could exclude this else block to have it do nothing within this listener
        alert('child ele clicked');
    }
});

-Вы можете проверить событие для детей div и прекратить пролонгацию:

$("#modal-wrapper").click( function(e) {
    alert('parent ele clicked');
});
$("#modal-wrapper").children().click( function(e) {
    //this prevent the event from bubbling to any event higher than the direct children
    e.stopPropagation();
});

Answer 3

Вы можете проверить originalTarget следующим образом:

if (e.originalEvent.target.id == 'modal-wrapper') $('#modal-wrapper').hide();

Рабочий пример на JSFiddle

Но это не работает во всех браузеры, думаю, что было лучшее свойство.

Answer 4

Попробуйте использовать e.stopPropagation ()

$(document).ready(function() {
  $('#modal').click(function(e) {
    e.stopPropagation();
  });
  $('#modal-wrapper').click(function(e) {
    $('#modal-wrapper').hide();
  });
});

Answer 5

Вы можете добиться этого, остановив распространение события щелчка, вот пример:

document.getElementById("noTriggerHideElement").addEventListener("click", function(event) { //what you want to do event.preventDefault(); }, false);

другой пример: https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_event_preventdefault

больше информации: https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault

Вы также можете использовать event.stopPropagation ();