0

Мне нужно сделать, чтобы при нажатии на круг срабатывало событие "click". Но оно отрабатывает только за границами надписи "Нажмите на кнопку". Я делаю это через делегирование. Навешиваю класс на весь документ и потом через event.target.className проверяю условие: если это "circle" , тогда выведи alert. Но я не понимаю,почему не срабатывает на тексте. Спасибо за ответ.введите сюда код

function clickFunction(event) {
            if (event.target.className == 'circle') {
                alert('нажал')
            }
        }
document.addEventListener('click', clickFunction);
.circle {
    width: 100px;
    height: 100px;
    background-color: aquamarine;
    color: black;
    border-radius: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    font-size: 14px;
    text-align: center;
}
body {
    display: flex;
    justify-content: center;
    align-items: center;
}
<div class="circle">
    <span class="circle__text">Нажмите на круг</span>
</div>

6
  • замените ``` event.target.className == 'circle' ``` на ``` event.target.closest('.circle') ``` 14 июн 2021 в 12:25
  • @Макск, спасибо, помогло
    – IvanCoin
    14 июн 2021 в 12:31
  • Объясните зачем на document вешать событие?
    – Greg--
    14 июн 2021 в 13:36
  • @Greg--, это называется делегированием обработки событий - оно удобно в тех ситуациях, когда нужно добавить общий слушатель события возникающего на множестве элементов (включая элементы, добавляемые в DOM динамически), и/или когда нужно соблюдать очередность выполнения обработчиков, и т.д.. Работает делегирование благодаря механике распространения событий в DOM (сначала захват - движение "сверху вниз" по дереву, затем всплытие - "снизу вверх". В коде из вопроса, используется всплытие).
    – yar85
    14 июн 2021 в 21:44
  • Про всплытие и погружение я знаю, я не встречал еще в проектах чтоб на document вешали, по этому и спрашиваю. В чем удобаство я не совсем понимаю, нужно же условия писать что если клик на таком то элементе то... или написать напрямую слушателя на этот же элемент, получается и там и там условие писать.
    – Greg--
    15 июн 2021 в 8:20

2 ответа 2

0

function clickFunction(event) {
    console.log(event.target.className);
    
    if (event.target.className == 'circle') {
        alert('нажал')
    }
    
    if (event.target.className == 'circle__text') {
        alert('нажал circle__text')
    }
}
document.addEventListener('click', clickFunction);
.circle {
  width: 100px;
  height: 100px;
  background-color: aquamarine;
  color: black;
  border-radius: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  font-size: 14px;
  text-align: center;
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
}
<div class="circle">
  <span class="circle__text">Нажмите на круг</span>
</div>

а лучше event.target.className.includes('circle__text') потому что классов может быть несколько

5
  • 1
    А если в "circle" будет множество вложенных элементов. Мне для всех условия прописывать?
    – IvanCoin
    14 июн 2021 в 12:25
  • Ну тебе же не нужно делать конкретное действие при клике на все вложенные элементы? А если нужно, тогда в отлове конкретного кликнутого элемента в принице никакого смысла нет 14 июн 2021 в 12:30
  • @IvanCoin В таких случаях делегирование и не нужно) document.querySelector(".circle__text").addEventListener("click",nameFunc)
    – Locker
    14 июн 2021 в 13:37
  • @Locker если кликнуть на div то не сработает ) 14 июн 2021 в 13:43
  • @Макск Это пример, можно поставить родителя и все будет работать, как текст так и родитель
    – Locker
    14 июн 2021 в 13:44
0

А если в "circle" будет множество вложенных элементов. Мне для всех условия прописывать?

В данном случае вам понадобится 'closest', который возвращает ближайший родительский элемент. А для понимания природы клика рекомендую — Всплытие и погружение.

function clickFunction(event) {
  if (event.target.closest('.circle')) { 
    console.log('.circle');
  } else {
    alert('Упс — мимо.)')
  }
}
document.addEventListener('click', clickFunction);
.circle {
  width: 100px;
  height: 100px;
  background-color: aquamarine;
  color: black;
  border-radius: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  font-size: 14px;
  text-align: center;
}
.square {
  width: 70px;
  height: 70px;
  background-color: grey;
}
.circle_small {
  width: 70px;
  height: 70px;
  background-color: white;
  border-radius: 50%;
}
.text {
  font-family: sans-serif;
  font-size: 10px;
  line-height: 12px;
  display: inline-block;
}

body {
    display: flex;
    justify-content: center;
    align-items: center;
}
<div class="circle">
  <div class="square">
    <div class="circle_small">
      <span class="text">Нажмите куда попало в области большого круга</span>
    </div>
  </div>
</div>

Ваш ответ

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

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