addEventListener 'click' 事件无法识别点击且无法调用函数

Question

编辑：删除了所有问题内容，因为我将 JavaScript 擦干净并从头开始，它有效。据我所知，我没有做任何与第一次不同的事情。我仍然不确定为什么它以前不工作，但现在可以工作了。请参阅下面的答案以了解有效的 addEventListener click/toggle 事件。

Answer 1

事件监听器的参数是事件。如果您想要附加事件侦听器的元素，请引用事件的 currentTarget。

function activateOffCanvasNav(e) {
  e.currentTarget.classList.toggle('active');
}

如果您尝试执行 e.classList.toggle，就像您目前正在做的那样，您将得到 TypeError，因为事件没有 classList 属性。

正在进行现场演示：

document.getElementById('hamburger-icon').addEventListener('click', activateOffCanvasNav);
function activateOffCanvasNav(e) {
  console.log('here')
  e.currentTarget.classList.toggle('active');
}

.active {
  background-color: green;
}

<header>
  <!-- small screens only -->
  <div class="small-nav-header">
    <a id="nav-toggle" href="#!">
      <div id="hamburger-icon" class="hamburger-icon">
        <div class="bar1">bar</div>
        <div class="bar2"></div>
        <div class="bar3"></div>
      </div>
    </a>
  </div>
</header>

addEventListener 'click' 事件无法识别点击且无法调用函数

addEventListener 'click' event not recognizing click and not calling function

javascript

click

onclick

toggle

addeventlistener