收到一定数量的点击后如何禁用事件监听器?
我认为以下代码是错误的,因为我要求从事件监听器中禁用事件监听器。
let cells = document.querySelectorAll('.cell');
let temp = 0;
function clicker (x) {
temp += 1;
console.log('clicked',x.target.classList[1],temp);
x.target.style.backgroundColor = 'red';
if (temp === 3) {
cells.forEach(c => c.removeEventListener('click', (el) => clicker(el)));
}
return;
}
cells.forEach(c => c.addEventListener('click', (el) => clicker(el)));
.main {
display: grid;
grid-template-columns: repeat(3,90px);
grid-template-rows: repeat(2, 90px);
row-gap: 5px;
column-gap: 5px;
}
.cell {
width: 90px;
height: 90px;
background-color: blue;
}
<div class="main">
<div class = "cell fir"></div>
<div class = "cell sec"></div>
<div class = "cell thi"></div>
<div class = "cell fou"></div>
<div class = "cell fif"></div>
<div class = "cell six"></div>
</div>
传递给removeEventListener
的函数必须与传递给addEventListener
的函数相同。由于您在每个地方都使用匿名函数,因此它们将不是相同的函数。
仅使用函数的名称,而不要使用调用它的匿名函数。
let cells = document.querySelectorAll('.cell');
let temp = 0;
function clicker (x) {
temp += 1;
console.log('clicked', temp);
if (temp === 3) {
cells.forEach(c => c.removeEventListener('click', clicker));
}
return;
}
cells.forEach(c => c.addEventListener('click', clicker));
.main {
display: grid;
grid-template-columns: repeat(3,90px);
grid-template-rows: repeat(2, 90px);
row-gap: 5px;
column-gap: 5px;
}
.cell {
width: 90px;
height: 90px;
background-color: blue;
}
<div class="main">
<div class = "cell fir"></div>
<div class = "cell sec"></div>
<div class = "cell thi"></div>
<div class = "cell fou"></div>
<div class = "cell fif"></div>
<div class = "cell six"></div>
</div>