EventListener не одинаково ловит кнопки - PullRequest
Новая
       103

EventListener не одинаково ловит кнопки

0 голосов
/ 07 июля 2019

Я пытаюсь построить свой первый калькулятор.При добавлении eventListener, функция только иногда вводит оператор if.Т.е., если я нажимаю на какое-то число, оно не регистрируется, но когда я пытаюсь использовать другие числа, а затем первое снова, оно работаетЯ действительно не понимаю такого поведения.

Здесь вы можете взглянуть (входит в консоль) https://jsfiddle.net/ert54b7z/2/

const keys = document.querySelector(".keypad");
keys.addEventListener("click", function(e) {
  if (e.target.matches("button")) {
    const button = e.target;
    const key = button.dataset.key;
    console.log(key);
  }
});

<div class="keypad">
  <div class="clear">
    <button data-key="clear" class="button"><p>C</p></button>
    <button data-key="all-clear" class="button"><p>AC</p></button>
  </div>
  <div class="operations">
    <button data-key="plus" class="button"><p>+</p></button>
    <button data-key="minus" class="button"><p>-</p></button>
    // ...
  </div>
  <div class="numbers">
    <button data-key="7" class="button"><p>7</p></button>
    <button data-key="8" class="button"><p>8</p></button>
    // ...
  </div>
  <button data-key="equals" class="button equals"><p>=</p></button>
</div>

Ответы [ 2 ]

0 голосов
/ 09 июля 2019

Хорошая интуиция - использовать делегирование событий. Вы проверяете цель события click, но поскольку ваши кнопки содержат теги абзаца, они становятся целью щелчка, если вы нажимаете где-то в центре кнопок. Удалите теги <p> (они все равно не нужны), и ключи будут регистрироваться при каждом нажатии.

0 голосов
/ 07 июля 2019

Вы присоединяете слушателя события к внешнему div.Вам нужно прикрепить его к кнопкам. 

$('.keypad').on('click', myFunction);

function myFunction(e) {
// do stuff here
}
<div class="">
  <div class="clear">
    <button data-key="clear" class="keypad button"><p>C</p></button>
    <button data-key="all-clear" class="keypad button"><p>AC</p></button>
  </div>
  <div class="operations">
    <button data-key="plus" class="keypad button"><p>+</p></button>
    <button data-key="minus" class="keypad button"><p>-</p></button>
    // ...
  </div>
  <div class="numbers">
    <button data-key="7" class="keypad button"><p>7</p></button>
    <button data-key="8" class="keypad button"><p>8</p></button>
    // ...
  </div>
  <button data-key="equals" class="keypad button equals"><p>=</p></button>
</div>

<!-- include jquery -->
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.4.1.min.js"></script>
...