Почему вызываются все события щелчка для флажков, хотя я нажал только один флажок?

Я установил только один флажок, но вызываются другие прослушиватели кликов, прикрепленные к другим флажкам. Я не думаю, что это типичный случай всплытия событий. Как решить эту проблему?

Я уже проверил, связано ли это с всплытием событий. Но я так не думаю, потому что мои входные теги горизонтальны.

Всплывающее окно.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 : &quot;Gears 5&quot;">
      <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});
});

Я хочу, чтобы один конкретный прослушиватель событий вызывался при нажатии соответствующего флажка.


javascript html google-chrome-extension
person KimLikeAStone    schedule 12.09.2019    source источник
comment
Второй аргумент addEventListener должен быть функцией, а не результатом вызова функции - если только CheckEvent(.....) не возвращает функцию... что такое CheckEvent функция?   -  person Jaromanda X    schedule 12.09.2019
comment
обратите внимание: ваши элементы <input> не являются допустимым HTML, они самозакрывающиеся   -  person Jaromanda X    schedule 12.09.2019
comment
{capture: true} должен быть аргументом addEventListener, а не CheckEvent   -  person Barmar    schedule 12.09.2019
comment
dict[x].id это то же самое, что просто x, не так ли?   -  person Barmar    schedule 12.09.2019

Ответы (1)


arrow_upward
1
arrow_downward

Вы неправильно звоните addEventListener. Аргумент должен быть ссылкой на функцию, а не результатом вызова функции. И параметры должны быть аргументом для addEventListener.

dict["pcCheck"].addEventListener("click", function() {
    CheckEvent("pcCheck");
},{capture:true});

Однако, если вы немного измените CheckEvent, вы можете упростить его до:

dict["pcCheck"].addEventListener("click", CheckEvent, {capture:true});

Когда вызывается прослушиватель событий, this устанавливается в качестве цели события, поэтому вы можете просто использовать this внутри функции, а не вызывать document.getElementById() с аргументом.

person Barmar    schedule 12.09.2019
comment
Проблема решена благодаря вам. Но у меня есть дополнительные вопросы. Так почему же все события щелчка для флажков вызываются в предыдущем коде, которому я передал значение во втором параметре addEventListener? - person KimLikeAStone; 12.09.2019
comment
Когда вы пишете func1(func2(...)), это означает, что нужно немедленно вызвать func2(...), а затем вызвать func1() с возвращенным значением в качестве аргумента. Поэтому, если вы пишете addEventListener("click", CheckEvent(...)), он немедленно вызывает CheckEvent(...), а затем вызывает addEventListener(). - person Barmar; 12.09.2019