Question

我正在尝试构建我的第一个计算器。添加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>

Answer 1

您要将事件侦听器附加到外部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>

Answer 2

使用事件委托是一个很好的直觉。您检查单击事件的目标，但是由于您的按钮包含段落标签，因此如果您单击按钮中心的某处，它们将成为单击目标。删除<p>标签（无论如何都不需要），并且每次单击都会记录这些键。

EventListener无法平均捕获按钮

2 个答案: