Задать вопрос
@evil0o
javascript

Как сделать, чтобы событие не срабатывало на вложенных дивах?

Как сделать, чтобы событие для XXX не срабатывало на XXX1?
<!DOCTYPE html>
<html>
<head>
<script class="jsbin" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>

<style>
div {  
  position: absolute;
  left: 0px; 
  top: 0px; 
  padding: 2%;
}
  p{
    margin: 20px;
    clear: both;
  }
</style>
</head>
<body>

<div ID="XXX" style="width: 3%; height: 100%; background: lightgrey">
  <div ID="XXX1" style="width: 500PX; background: #F0F">
      sdffsdfsdf
  </div>
</div>
  <p>dsbfjvhbdivhjlzdhvfilv</p>

<div id=d style="width: 20%; height: 50%; background: gray; display: none"><a href="">content</a>
</div>
 
  
<script>
$( "#XXX" ).click(function( event ) {
      $("#d").css("background", "red");
      $("#d").show();
});
    

  $('#d').mouseleave(function () {$(this).hide(); })
</script>
  
</body>
</html>
  • Вопрос задан
  • 2780 просмотров
Комментировать
Подписаться 6 Оценить Комментировать
Решения вопроса 1
Fesor
@Fesor
Full-stack developer (Symfony, Angular)
Попробуйте как-то так:
$('#XXX').on('click', function (e) {
    if (!$(e.target || e.srcElement).is('#XXX')) {
        // ивент сработал на вложенном элементе
        e.stopPropogation();
        return false;
    }

    // сделать что-то
});
Ответ написан
5 комментариев
5 комментариев
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
Вакансии с Хабр Карьеры
JavaScript разработчик
summer • Ярославль
от 100 000 до 140 000 ₽
Junior JavaScript Developer
КРАФТТЕК • Санкт-Петербург
от 60 000 до 80 000 ₽
JavaScript разработчик
Мэтч
от 80 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
[python,go] Залить ВИДЕО в тикток
19 апр. 2024, в 23:00
5000 руб./за проект
Разработка VST-плагина
19 апр. 2024, в 20:43
20000 руб./за проект
Нарисовать баннер для интернет-магазина
19 апр. 2024, в 20:35
500 руб./в час
Ещё заказы