使用 Javascript，當在具有“click”事件偵聽器的元素上使用多個函式時，在第一個單擊事件之后，如何從“單擊”事件偵聽器中洗掉單個函式？在這里，在第一次點擊后，只toggleView()應保留并renderList()應洗掉。
const button = document.getElementById("view_button");
button.addEventListener("click", () => {
toggleView(); // want to keep this indefinitely
renderList(); // want to remove this after the first click
button.removeEventListener("click", renderList);
});
uj5u.com熱心網友回復：
您需要分別添加兩者，并{ once: true }在第一次執行后指定要洗掉的那個。
見MDN：
once
一個布林值，指示添加后最多應呼叫一次偵聽器。如果為 true，則在呼叫時會自動洗掉偵聽器。
function toggleView() {
console.log('toggleView');
}
function renderList(evt) {
console.log('renderList');
}
const button = document.getElementById("view_button");
button.addEventListener("click", toggleView);
button.addEventListener("click", renderList, { once: true });<button type="button" id="view_button">Click</button>uj5u.com熱心網友回復：
您可以添加兩個事件偵聽器并洗掉一個
function toggleView() {
console.log('toggleView');
}
function renderList(evt) {
evt.currentTarget.removeEventListener("click", renderList);
console.log('renderList');
}
const button = document.getElementById("view_button");
button.addEventListener("click", toggleView);
button.addEventListener("click", renderList);<button type="button" id="view_button">Click</button>或者您可以添加邏輯來確定是否應該運行該函式。
function toggleView() {
console.log('toggleView');
}
function renderList() {
console.log('renderList');
}
const button = document.getElementById("view_button");
button.addEventListener("click", () => {
toggleView();
if (!button.dataset.clicked) {
renderList();
button.dataset.clicked = '1';
}
});<button type="button" id="view_button">Click</button>uj5u.com熱心網友回復：
我會在這里使用閉包來跟蹤專案是否被點擊。
const button = document.getElementById("view_button");
function toggleView() {
console.log('Toggle View');
}
function renderList() {
console.log('Render List');
}
function clickHandler() {
let hasBeenClicked = false;
return function () {
toggleView();
if (!hasBeenClicked) {
renderList();
hasBeenClicked = true;
}
};
}
button.addEventListener("click", clickHandler());<button id="view_button" type="button">View Button</button>轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/338713.html
標籤：javascript
上一篇：如何讓用戶輸入查看字串