个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
24
4
我只选中了一个复选框，但附加到其他复选框的另一个单击监听器被调用。我不认为这是事件冒泡的典型案例。我该如何解决这个问题？
我已经检查过这是否与事件冒泡有关。但我不这么认为，因为我的输入标签是水平的。
弹出.html
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h3>Input game title to search metacritic score!</h3><br>
<p>Press the "Enter" key inside the input field to trigger the button.</p>
<input id="gameTitle" value="Example : "Gears 5"">
<input type="checkbox" name="Pc" id="pcCheck">PC<br>
<input type="checkbox" name="Ps4" id="ps4Check">PS4<br>
<input type="checkbox" name="Xbox" id="xboxCheck">XBOX<br>
<input type="checkbox" name="Switch" id="switchCheck">SWITCH<br>
<button id="confirmBtn">Confirm</button>
<p id = "content"></p>
<script src="popup.js"></script>
</body>
</html>
Popup.js
var dict = {};
dict["confirmBtn"] = document.getElementById("confirmBtn");
dict["pcCheck"] = document.getElementById("pcCheck");
dict["ps4Check"] = document.getElementById("ps4Check");
dict["xboxCheck"] = document.getElementById("xboxCheck");
dict["switchCheck"] = document.getElementById("switchCheck");
document.addEventListener('DOMContentLoaded', function() {
dict["confirmBtn"].addEventListener("click", confirmBtnEvent);
dict["pcCheck"].addEventListener("click", CheckEvent("pcCheck"),{capture:true});
dict["ps4Check"].addEventListener("click", CheckEvent("ps4Check"),{capture:true});
dict["xboxCheck"].addEventListener("click", CheckEvent("xboxCheck"),{capture:true});
dict["switchCheck"].addEventListener("click", CheckEvent("switchCheck"),{capture:true});
});
我希望在单击相应的复选框时调用一个特定的事件监听器。
最佳答案
您没有正确调用addEventListener。参数应该是函数引用，而不是调用函数的结果。并且这些选项必须是 addEventListener 的参数。
dict["pcCheck"].addEventListener("click", function() {
CheckEvent("pcCheck");
},{capture:true});
但是，如果稍微更改 CheckEvent，则可以将其简化为:
dict["pcCheck"].addEventListener("click", CheckEvent, {capture:true});
当调用事件监听器时，this 被设置为事件的目标，因此您可以只在函数内使用 this，而不是调用 document.getElementById() 带有参数。
关于javascript - 为什么我只点击了一个复选框，却调用了所有复选框的点击事件？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/57900285/
24
4
0
我是一名优秀的程序员,十分优秀！