当我将 removeEventListener 放在另一个条件语句中时，它不起作用

Question

我已经尝试解决这个问题一个星期了，但我找不到任何解决方案。

当我把 removeEventListener 放在函数 MediaQuery3(z) 中时，它不起作用。

我使用 MediaQuery 为移动 phone 用户添加了一个事件，并为桌面用户删除了它。

let firstNumber=0; 
    let secondNumber = 0;
    function MediaQuery3(z) {

      let inputSearch = document.getElementById("input-search");
      let searchBtn = document.getElementById("search-btn");
   

      if (z.matches) { 
 
          
          if (firstNumber==0) {
            searchBtn.addEventListener("click", clickSearch);
          
            function clickSearch() {
              
              if (inputSearch.style.display==="none") {
                inputSearch.style.display="block";
              } else{
                inputSearch.style.display="none";
              }
            }
          
          firstNumber=1;
          secondNumber=0
    
        }


      } else{ 
 
        if (secondNumber==0) {
          
        
          searchBtn.removeEventListener("click", clickSearch);
          inputSearch.style.display="block";
        }
        firstNumber=0;
        secondNumber=1
      }}
    

    var z = window.matchMedia("(max-width: 430px)");
    MediaQuery3(z);
    z.addListener(MediaQuery3) ;

  <!doctype html >
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
   
    <body>
  <nav class="navbar navbar-expand-sm navbar-dark">
        <img src="d82a392b-6975-49e1-a8fd-a6e28a195b2b_200x200.png" alt="logo" id="logo-image"> 
      <form class="form-inline" >
        <button id="search-btn" type="button" ><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAABmJLR0QA/wD/AP+gvaeTAAABD0lEQVRIie2UPW7CQBCFP5IS0gEnoQdyAxAHSQoUUSD+Gm4DIiegoITkAOEMJIQWTDFvwY3xrqFAUZ402rX95r2xvTPwV1EGRsAHsFOsgCFQula8BWyBKCF+gOY14gcJTYAqkFfUgKme7YFGqHg5Vnn7Au9NnG+gGGIw4lx5GmbiDkIMPpVU9eDWxV2FGPwqqeDBfRJ3m0Z8iO2jgGJyvsS4wVprxSPPcb5CDN61vngYvGqdeXBPKGFNFGFHMQkdcTZk6Oom1kSRqqtjP70APGNv6Tq6Gyru0MCaKGlUbCTurvtZTIpYEy2x47vTfsD5s8RNM5mkwY0MF+N/k7sy6bmbjzc0WGAzak7gGL9vHAG+Ol6n6x8u5AAAAABJRU5ErkJggg=="/></button>
          <input id="input-search" class="form-control" type="text" placeholder="" aria-label="Search">
      </form>
      <img src="https://img.icons8.com/pastel-glyph/64/000000/shopping-cart--v1.png" id="cart">
      </nav>
        </body>
      </html>

Answer 1

您使用 addEventListener 添加的侦听器必须与您为 removeEventListener 提供的完全相同的功能引用。但是由于您已将 clickSearch 定义为嵌套函数，因此每次执行 MediaQuery3 时实际上都会为它提供不同的引用，因为每个引用都绑定到不同的闭包。如果您将 clickSearch 移到函数外部，使其不嵌套，则两次引用都相同，并且它会正常工作。

let firstNumber = 0; 
let secondNumber = 0;

function clickSearch() {
  let inputSearch = document.getElementById("input-search");

  if (inputSearch.style.display === "none") {
    inputSearch.style.display = "block";
  } else {
    inputSearch.style.display = "none";
  }
}

function MediaQuery3(z) {
  let inputSearch = document.getElementById("input-search");
  let searchBtn = document.getElementById("search-btn");

  if (z.matches) { 
    if (firstNumber == 0) {
      searchBtn.addEventListener("click", clickSearch);

      firstNumber = 1;
      secondNumber = 0;
    }
  } else { 
    if (secondNumber == 0) {
      searchBtn.removeEventListener("click", clickSearch);
      inputSearch.style.display = "block";
    }

    firstNumber = 0;
    secondNumber = 1;
  }
}

var z = window.matchMedia("(max-width: 430px)");
MediaQuery3(z);
z.addListener(MediaQuery3);

  <!doctype html >
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
   
    <body>
  <nav class="navbar navbar-expand-sm navbar-dark">
        <img src="d82a392b-6975-49e1-a8fd-a6e28a195b2b_200x200.png" alt="logo" id="logo-image"> 
      <form class="form-inline" >
        <button id="search-btn" type="button" ><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAABmJLR0QA/wD/AP+gvaeTAAABD0lEQVRIie2UPW7CQBCFP5IS0gEnoQdyAxAHSQoUUSD+Gm4DIiegoITkAOEMJIQWTDFvwY3xrqFAUZ402rX95r2xvTPwV1EGRsAHsFOsgCFQula8BWyBKCF+gOY14gcJTYAqkFfUgKme7YFGqHg5Vnn7Au9NnG+gGGIw4lx5GmbiDkIMPpVU9eDWxV2FGPwqqeDBfRJ3m0Z8iO2jgGJyvsS4wVprxSPPcb5CDN61vngYvGqdeXBPKGFNFGFHMQkdcTZk6Oom1kSRqqtjP70APGNv6Tq6Gyru0MCaKGlUbCTurvtZTIpYEy2x47vTfsD5s8RNM5mkwY0MF+N/k7sy6bmbjzc0WGAzak7gGL9vHAG+Ol6n6x8u5AAAAABJRU5ErkJggg=="/></button>
          <input id="input-search" class="form-control" type="text" placeholder="" aria-label="Search">
      </form>
      <img src="https://img.icons8.com/pastel-glyph/64/000000/shopping-cart--v1.png" id="cart">
      </nav>
        </body>
      </html>

当我将 removeEventListener 放在另一个条件语句中时，它不起作用

When I put removeEventListener in another conditional statement it doesn't work

javascript

addeventlistener

removeeventlistener