Нажмите событие на div с img и текст не срабатывает при нажатии img - PullRequest
Новая
       8

Нажмите событие на div с img и текст не срабатывает при нажатии img

0 голосов
/ 19 ноября 2018

Я написал скрипт переключения в ES6 / vanilla JS.Предназначенная функциональность очень проста: вы нажимаете на переключающий элемент div, и он добавляет класс active к другому разделенному элементу, который соответствует свойству data-toggle переключаемого элемента.В моем переключателе div мне нужны текст и изображение.Это прекрасно работает, когда вы нажимаете на текст внутри div, но когда вы нажимаете на изображение внутри div, переключатель не срабатывает.Есть ли что-то конкретное, что мне нужно сделать, чтобы включить все дочерние элементы в div?

По какой-то причине я даже не могу заставить это работать через этот редактор фрагментов кода, но это работает в моем проекте.

const setActive = (toggles, panels, id) => {
  let activePanel = panels.filter(panel => panel.getAttribute('data-toggle') == id)
  let activeToggle = toggles.filter(toggle => toggle.getAttribute('data-toggle') == id)
  activePanel.forEach(panel => panel.classList.add('active'))
  activeToggle.forEach(toggle => toggle.classList.add('active'))
}

const removeActive = (nodes) => {
  nodes.forEach(node => node.classList.remove('active'))
}

const handler = (event) => {
  event.preventDefault()
  let id = event.target.getAttribute('data-toggle')
  let panels = Array(...document.querySelectorAll('.js-toggle-panel'))
  let toggles = Array(...document.querySelectorAll('.js-toggle'))
  removeActive(panels)
  removeActive(toggles)
  setActive(toggles, panels, id)
}

let toggles = Array(...document.querySelectorAll('.js-toggle'))
toggles.forEach(toggle => toggle.addEventListener('click', handler))
.toggle-panel {
  display: none;
}

.toggle-panel .active {
  display: block;
}
<div class="js-toggle toggle" data-toggle="toggle-1">
  <img src="https://via.placeholder.com/50"> First toggle
</div>

<div class="js-toggle toggle" data-toggle="toggle-2">
  Second toggle
</div>

<div class="js-toggle-panel toggle-panel" data-toggle="toggle-1">
  <h1>Toggle 1</h1>
</div>

<div class="js-toggle-panel toggle-panel" data-toggle="toggle-2">
  <h1>Second toggle!</h1>
</div>

Ответы [ 2 ]

0 голосов
/ 19 ноября 2018

Я изменил две вещи, которые, по моему мнению, решат вашу проблему:

  1. Я изменил селектор .toggle-panel .active на .toggle-panel.active - без этого, даже в тех случаях, когда JS работал так, как вы предполагали, на самом деле ничего нельзя было сделать видимым.
  2. Я переместил ваш код с использования event.target на event.currentTarget - первый всегда указывает на элемент, по которому щелкнули, в то время как последний относится к элементу, на котором слушатель был размещен.

См. Фрагмент ниже. 

const setActive = (toggles, panels, id) => {
  let activePanel = panels.filter(panel => panel.getAttribute('data-toggle') == id)
  let activeToggle = toggles.filter(toggle => toggle.getAttribute('data-toggle') == id)
  activePanel.forEach(panel => panel.classList.add('active'))
  activeToggle.forEach(toggle => toggle.classList.add('active'))
}

const removeActive = (nodes) => {
  nodes.forEach(node => node.classList.remove('active'))
}

const handler = (event) => {
  event.preventDefault()
  let id = event.currentTarget.getAttribute('data-toggle')
  let panels = Array(...document.querySelectorAll('.js-toggle-panel'))
  let toggles = Array(...document.querySelectorAll('.js-toggle'))
  removeActive(panels)
  removeActive(toggles)
  setActive(toggles, panels, id)
}

let toggles = Array(...document.querySelectorAll('.js-toggle'))
toggles.forEach(toggle => toggle.addEventListener('click', handler))
.toggle-panel {
  display: none;
}

.toggle-panel.active {
  display: block;
}
<div class="js-toggle toggle" data-toggle="toggle-1">
  <img src="https://via.placeholder.com/50"> First toggle
</div>

<div class="js-toggle toggle" data-toggle="toggle-2">
  Second toggle
</div>

<div class="js-toggle-panel toggle-panel" data-toggle="toggle-1">
  <h1>Toggle 1</h1>
</div>

<div class="js-toggle-panel toggle-panel" data-toggle="toggle-2">
  <h1>Second toggle!</h1>
</div>
0 голосов
/ 19 ноября 2018

Вместо event.target вы должны использовать event.currentTarget в вашей функции handler, чтобы вернуть узел, к которому подключен прослушиватель событий.event.target возвращает <img> узел, а не <div> с data-toggle в вашем случае.

...