1

Есть блок родитель и у него есть 1 ребенок

<div id="pop_bg">
<div id="pop_content">
</div>
</div>

Стоит событие клика на родителя, если кликаю на pop_bg то закрывается pop_bg, но беда в том , что когда я кликаю на контент ребенка (pop_content) - у меня срабатывает событие клика на pop_bg, и закрывается pop_bg, почему так? Как исправитть?

3
  • писать правильно код 4 янв 2016 в 9:29
  • 6
    добавьте javascript который используете, но вам наверняка нужен метод stopPropagation
    – Grundy
    4 янв 2016 в 9:30
  • Учусь писать правильно, поэтому и спрашиваю как лучше
    – user197892
    5 янв 2016 в 17:34

3 ответа 3

1

Попробуйте так через stopPropagation();

$('body').on('click', '#open', function(e) {
  e.preventDefault();
  $("#pop_bg").show();
});
$('body').on('click', '#pop_bg', function(e) {
  e.preventDefault();
  $("#pop_bg").hide();
});
$('body').on('click', '#pop_content', function(e) {
  e.stopPropagation()
});
#pop_bg {
  background: rgba(0, 0, 0, 0.5);
  position: fixed;
  padding: 50px;
  z-index: 1000;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: none;
  overflow-x: hidden;
  overflow-y: overlay;
}
#pop_content {
  width: 500px;
  height: 100px;
  margin: auto;
  background: #FFF;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a id="open">Open modal</a>
<div id="pop_bg">
  <div id="pop_content">
    Content
  </div>
</div>

0

как вариант, можно написать так:

/*HTML*/
<div id="pop_bg">
<div id="pop_content">
</div>
</div>

/*CSS*/
#pop_bg {
  width:350px;
  height:350px;
  background-color:#ccc;
   position:relative;
}

#pop_content {
  position:absolute;
  width:80%;
  height:80%;
  background-color:red;
  margin:auto;
  top:0;
  bottom:0;
  left:0;
  right:0;
}

/*JS+JQUERY*/
$('#pop_bg').bind('click', function(e) {
 if (e.target.id != 'pop_bg') return false;
 $(this).hide();
});

http://codepen.io/anon/pen/NxdOoO

0

Версия без jQuery:

document.querySelector('#pop_bg').addEventListener('click', function(e) {
    if (this === e.target) {
        // Ваш код
    }
});

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.