javascript 为什么 addEventListener("click",...) 在显示弹出模式时立即触发

Question

我正在尝试创建简单模式 (bootstrap 5.1)。这是一些应该执行此操作的简化代码：

window.onload = function(){
        var btnFavouriteLoad = document.getElementById('btnLoadList');
    
    if(btnFavouriteLoad){
        btnFavouriteLoad.addEventListener('click', function(event){
            console.log("on click event");
          
        });
    }
   
}

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We" crossorigin="anonymous">    <link href="style.css" rel="stylesheet"/>
     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-U1DAWAznBHeqEIlVSCgzq+c9gqGAJn5c/t99JyeKa9xxaYpSvHU5awsuZVVFIhvj" crossorigin="anonymous"></script> 
   
    <title>TradingView For Multi Chart</title>
  </head>
  <body>
    <div>
      <p style="text-align: center;padding-top: 5px;">
        <button class="btn btn-primary" type="button"  id="btnLoadList" data-bs-toggle="modal" data-bs-target="#loadModal" >
            Show Modal
          </button>
      </p>
     
    <div class="modal fade" id="loadModal" tabindex="-1" aria-labelledby="loadModalLabel" aria-hidden="true">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title" id="loadModalLabel">Load data</h5>
            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
          </div>
          <div class="modal-body">
            <form>
              <div class="mb-3">
                <label for="favourite-name" class="col-form-label">Favourite List</label>
                <select id="favouriteList" name="favouriteList" class="form-select" size="3" aria-label="size 3 select">

                </select>
              </div>
            </form>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
            <button type="button" class="btn btn-primary" id="btnLoadList">Apply</button>
          </div>
        </div>
      </div>
    </div>

   
   </body> 
    </html>

我为应用按钮 (id =btnLoadList) 注册了事件点击，但我不明白为什么当弹出模式显示时，点击事件立即触发（写入控制台“点击事件”）。我想在单击“应用”按钮时触发事件。请帮忙 me.Thanks.

Answer 1

您的 Show Modal 和 Apply 按钮都有相同的 ID。由于 getElementById returns 找到第一个元素，它将事件添加到您的 Show Modal 按钮而不是您的 Apply 按钮。

ID 无论如何都应该是唯一的，因此请尝试将其中一个更改为新值。请参阅下面的示例。

window.onload = function(){
        var btnFavouriteLoad = document.getElementById('btnLoadList');
    
    if(btnFavouriteLoad){
        btnFavouriteLoad.addEventListener('click', function(event){
            console.log("on click event");
          
        });
    }
   
}

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We" crossorigin="anonymous">    <link href="style.css" rel="stylesheet"/>
     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-U1DAWAznBHeqEIlVSCgzq+c9gqGAJn5c/t99JyeKa9xxaYpSvHU5awsuZVVFIhvj" crossorigin="anonymous"></script> 
   
    <title>TradingView For Multi Chart</title>
  </head>
  <body>
    <div>
      <p style="text-align: center;padding-top: 5px;">
        <button class="btn btn-primary" type="button"  id="btnOpenModal" data-bs-toggle="modal" data-bs-target="#loadModal" >
            Show Modal
          </button>
      </p>
     
    <div class="modal fade" id="loadModal" tabindex="-1" aria-labelledby="loadModalLabel" aria-hidden="true">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title" id="loadModalLabel">Load data</h5>
            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
          </div>
          <div class="modal-body">
            <form>
              <div class="mb-3">
                <label for="favourite-name" class="col-form-label">Favourite List</label>
                <select id="favouriteList" name="favouriteList" class="form-select" size="3" aria-label="size 3 select">

                </select>
              </div>
            </form>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
            <button type="button" class="btn btn-primary" id="btnLoadList">Apply</button>
          </div>
        </div>
      </div>
    </div>

   
   </body> 
    </html>

javascript 为什么 addEventListener("click",...) 在显示弹出模式时立即触发

javascript why addEventListener("click",...) firing immediately when display popup modal

javascript

addeventlistener