尽管我只单击了一个复选框，但为什么会调用复选框的所有单击事件？

我只选中了一个复选框，但调用了附加到其他复选框的另一个单击侦听器。我不认为这是事件冒泡的典型案例。我该如何解决这个问题？

我已经检查过这是否与事件冒泡有关。但我不这么认为，因为我的输入标签是水平的。

弹窗.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 type="checkbox" name="Switch" id="switchCheck">SWITCH<br>

<button id="confirmBtn">Confirm</button>

</body>

</html>

弹出窗口.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});

});

我希望在单击相应的复选框时调用一个特定的事件侦听器。

UYOU

浏览 161回答 1

1回答

隔江千里

你没有addEventListener正确调用。参数应该是函数引用，而不是调用函数的结果。并且选项需要是addEventListener.dict["pcCheck"].addEventListener("click", function() {    CheckEvent("pcCheck");},{capture:true});但是，如果您CheckEvent稍作更改，则可以将其简化为：dict["pcCheck"].addEventListener("click", CheckEvent, {capture:true});当一个事件监听器被调用时，this被设置为事件的目标，所以你可以只this在函数内部使用，而不是document.getElementById()用参数调用。

随时随地看视频慕课网APP