当我将 removeEventListener 放在另一个条件语句中时它不起作用
[英]When I put removeEventListener in another conditional statement it doesn't work
问题描述
I have tried to solve this problem for a week but I can't find any solutions.
我试图解决这个问题一个星期，但我找不到任何解决方案。
When I put removeEventListener in the function MediaQuery3(z) it doesn't work.当我将removeEventListener放入 function MediaQuery3(z)时，它不起作用。
I used MediaQuery to add an event for mobile phone users and removed it for desktop users.我使用MediaQuery为手机用户添加了一个事件，并为桌面用户删除了它。
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>1 个解决方案
解决方案1
2 已采纳 2020-06-25 16:49:39
The listener you add with addEventListener has to be the exact same reference to the exact same function that you give to removeEventListener .您使用addEventListener添加的侦听器必须与您提供给removeEventListener的 function 完全相同。 But since you've defined clickSearch as a nested function, it is actually given a different reference every time MediaQuery3 is executed, because each one is bound to a different closure.但是由于您已将clickSearch定义为嵌套的 function，因此每次执行MediaQuery3时实际上都会给它一个不同的引用，因为每个都绑定到不同的闭包。 If you move clickSearch outside of the function so it's not nested, the reference will be the same both times and it'll work properly.如果您将 clickSearch 移到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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.