我正在Atom中重构一个我在CodePen中成功完成的项目。这是工作CodePen项目的链接：https://codepen.io/meghanprestemon/pen/xxwdwzw?editors=1100
在Atom中，下面的click事件不会触发。我尝试将＃hamburger-icon设置为变量并将事件添加到变量中。我尝试使click函数成为嵌入式匿名函数和嵌入式匿名箭头函数。我尝试将ActivateOffCanvasNav切换事件添加到e，此变量和＃hamburger-icon变量中。我尝试将<script>标记放在html <head>，<body>的顶部和<body>的底部。我也尝试了许多其他方法，但无法获得任何东西来触发“单击”。当我在click事件.....addEventListener('click', activateOffCanvasNav())中调用该函数时，它会在页面加载时自动触发，这是我调用该函数的唯一方法。
我的想法不多了，不明白为什么在单击时无法识别我的div，并且不触发click事件。下面是html和js代码：
HTML
<header>
<!-- small screens only -->
<div class="small-nav-header">
<a id="nav-toggle" href="#!">
<div id="hamburger-icon" class="hamburger-icon">
<div class="bar1"></div>
<div class="bar2"></div>
<div class="bar3"></div>
</div>
</a>
</div>
</header>
JavaScript
document.addEventListener('DOMContentLoaded', () => {
document.getElementById('hamburger-icon').addEventListener('click', activateOffCanvasNav)
});
function activateOffCanvasNav(e) {
e.classList.toggle('active');
}
单击时，＃hamburger-icon div应该打开和关闭.active类。这会将.bar div从汉堡包来回转换为CSS中的X。
事件侦听器的参数是事件。如果要将事件侦听器附加到element，请引用事件的currentTarget。
function activateOffCanvasNav(e) {
e.currentTarget.classList.toggle('active');
}
如果您像现在一样尝试执行e.classList.toggle，则会收到TypeError，因为事件没有classList属性。
您使用target
document.addEventListener('DOMContentLoaded', () => {
document.getElementById('hamburger-icon').addEventListener('click', activateOffCanvasNav)
});
function activateOffCanvasNav(e) {
e.target.classList.toggle('active');
}.active{
color: red;
}<header>
<!-- small screens only -->
<div class="small-nav-header">
<a id="nav-toggle" href="#!">
<div id="hamburger-icon" class="hamburger-icon">
<div class="bar1">bar1</div>
<div class="bar2">bar2</div>
<div class="bar3">bar3</div>
</div>
</a>
</div>
</header>