如何從 Function 中刪除事件監聽器
[英]How to Remove Event Listener from Function
問題描述
我正在使用W3 Schools的手風琴構建。 它工作得很好，但我想通過在我的 JS 文件中為此創建一個 function（而不是內聯<script>標簽）來清理一下。 問題是我需要通過刪除事件偵聽器來稍微調整一下，但我運氣不佳（仍在學習 JS）。 我怎樣才能做到這一點？
下面是我想要做的，但需要刪除事件偵聽器，因為它使用戶必須雙擊才能激活手風琴。
HTML：
<button class="accordion" onclick="faqsAccordion()">Section 1</button>
<div class="panel">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
JS
function faqsAccordion() {
var acc = document.getElementsByClassName("accordion");
var i;
for (i = 0; i < acc.length; i++) {
acc[i].addEventListener("click", function() {
this.classList.toggle("faqs-active");
var panel = this.nextElementSibling;
if (panel.style.maxHeight) {
panel.style.maxHeight = null;
} else {
panel.style.maxHeight = panel.scrollHeight + "px";
}
});
}
}
1 個解決方案
解決方案1
1 2021-01-28 21:01:06
要點
保留您用作事件偵聽器的 function 版本，例如
function MyHandler(){
console.log("clicked!");
}
document.getElementById("MyButton").addEventListener("click", MyHandler);
然后您可以稍后使用相同的 function 名稱將其刪除。
document.getElementById("MyButton").removeEventListener("click", MyHandler);
如果堅持使用onclick屬性，也可以在代碼中手動設置為null； 但是我不推薦它。 onclick中的 onclick 令人困惑，它執行字符串內部的代碼，而不是僅僅將“click”事件處理程序設置為具有該名稱的 function。
document.getElementById("MyButton").onclick = null;
奇怪的是，將其更改為不同的字符串不起作用。 許多粘附到 JS 的舊 HTML 屬性以違反直覺的方式工作。 它不起作用，因為 onclick屬性采用 function 指針並拒絕任何其他內容，同時 onclick屬性采用執行的字符串。
你想做什么
你想把這個
function faqsAccordion() {
var acc = document.getElementsByClassName("accordion");
var i;
for (i = 0; i < acc.length; i++) {
acc[i].addEventListener("click", function() {
this.classList.toggle("faqs-active");
var panel = this.nextElementSibling;
if (panel.style.maxHeight) {
panel.style.maxHeight = null;
} else {
panel.style.maxHeight = panel.scrollHeight + "px";
}
});
}
}
進入這個
<button class="accordion" id="faqsAccordian">Section 1</button>
<div class="panel">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
document.getElementById("faqsAccordian").addEventListener("click",faqsAccordian);
function myfunc(e){ // Added the "event" parameter for you, for future use :)
this.classList.toggle("faqs-active");
var panel = this.nextElementSibling;
if (panel.style.maxHeight) {
panel.style.maxHeight = null;
} else {
panel.style.maxHeight = panel.scrollHeight + "px";
}
}
function faqsAccordion() {
var acc = document.getElementsByClassName("accordion");
var i;
for (i = 0; i < acc.length; i++) {
acc[i].addEventListener("click", myfunc);
}
}
// ... some time later...
var acc = document.getElementsByClassName("accordion");
const whichever = 0;
// Randomly remove an event listener... muahuahua...
acc[whichever].removeEventListener("click", myfunc);
然而...
如果因為希望許多相同的 function 充當事件偵聽器而要使用匿名函數怎么辦？ 假設我們希望通過單擊下面的 MyButton 彈出另一個警告框。
<html>
<body>
<button id="MyButton">Add alert to the bottom button</button><br>
<button id="MyAlertButton">Popup please!</button>
<script>
var MyAlertButtonFunctionPointers = [];
function MyAlertButtonClickWrapper(e){
MyAlertButtonFunctionPointers.forEach(f=>f(e))
}
document.getElementById("MyAlertButton").addEventListener("click", MyAlertButtonClickWrapper);
document.getElementById("MyButton").addEventListener("click", function(e){
MyAlertButtonFunctionPointers.push(e=>{
alert("Hi! I'm a button with the name " + this.id + "\nThe event that lead to me being clicked happened at (" + e.screenX + ", " + e.screenY + ")");
})
})
</script>
</body>
</html>
然后，您可以通過將其從數組中彈出來選擇性地刪除您想要的任何事件偵聽器。
如何在不命名的情況下從匿名函數中刪除事件監聽器？
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.