Не учитывать одну из областей клика

122

19 ноября 2020, 06:00

Есть 2 области body и .click. При клике на .click я делаю объект .view видимым, а при клике на body я его скрываю.

Но тут возникает проблема пр клике на .click учитывается область body и получается два события объект открывается и сразу скрывается.

Вопрос: Как при клике на .click игнорировать клик на body?

$('.click').click(function() { 
  $('.view').show(); 
}); 
$('body').click(function() { 
  $('.view').hide(); 
});

a { 
  background: red 
} 
 
span { 
  background: green 
} 
 
body { 
  background: black 
} 
 
.click { 
  background: yellow 
} 
 
.view { 
  display: none; 
  background: white; 
  color: red; 
  padding: 10px 
} 
 
div { 
  padding: 10px 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
 
<body> 
  <div class="click"> 
    <a>link</a> 
    <span>span</span> 
  </div> 
  <div class="view"> 
    Text 
  </div> 
</body>

Answer 1

Дело в том, что событие "всплывает" по всему дереву элементов. Чтобы это предотвратить, если необходимо, нужно вызвать stopPropagation метод у события. Более подробно об этом можно прочесть здесь: https://learn.javascript.ru/event-bubbling

$('.click').click(function(e) { 
  e.stopPropagation(); 
  $('.view').show(); 
}); 
$('body').click(function() { 
  $('.view').hide(); 
});

a { 
  background: red 
} 
 
span { 
  background: green 
} 
 
body { 
  background: black 
} 
 
.click { 
  background: yellow 
} 
 
.view { 
  display: none; 
  background: white; 
  color: red; 
  padding: 10px 
} 
 
div { 
  padding: 10px 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
 
<body> 
  <div class="click"> 
    <a>link</a> 
    <span>span</span> 
  </div> 
  <div class="view"> 
    Text 
  </div> 
</body>