javascript - JavaScript addEventListener 不适用于移动切换菜单
问题描述
此 JavaScript 代码不起作用。
<div class="container">
<div class="bar1"></div>
<div class="bar2"></div>
<div class="bar3"></div>
</div>
let mobile = document.querySelector(".container");
mobile.addEventListener("click", myFunction);
function myFunction(x) {
x.classList.toggle("change");
}
但是这段 JavaScript 代码运行良好。
<div class="container" onclick="myFunction(this)">
<div class="bar1"></div>
<div class="bar2"></div>
<div class="bar3"></div>
</div>
function myFunction(x) {
x.classList.toggle("change");
}
第一个代码有什么问题。请帮我解决这个问题。
解决方案
Event 接口的target属性是对调度事件的对象的引用。event.target 属性可用于实现事件委托。当将同一个事件处理程序附加到多个元素时,使用 event.currentTarget 很有趣。
修改函数为→</p>
function myFunction(x) {
x.currentTarget.classList.toggle("change");
}
推荐阅读
- docker - 位桶管道 Docker 映像
- r - R:使用 read.table 加载数据时,逗号未被完全识别为分隔符
- php - 使用 url 重新加载 jquery 数据表
- python - 在 python 中绘制泊松分布图
- python - 在 Python 中分块下载并解压 tar 文件
- windows - 当多个实例正在运行时,如何通过进程的 cmd 停止一个实例?
- html - 添加居中
- 文本中间的行 - swift - 从 dataTask completionHandler 抛出错误
- scala - 在 Scala 中创建具有指定行数和列数的对角矩阵
- java - 测试是否使用 JUnit 或 Mockito 从类中调用了另一个方法