[英]Can't remove event listener
谁能告诉为什么bt2
事件侦听器未得到去除if
块。 就像我在p
函数中删除事件监听器一样,它被删除时没有任何错误或错误。 我很确定可能由于没有删除事件监听器而导致任何堆栈或范围问题,但我不知道可能是什么。 而且我知道事件监听器并不会被删除,因为后续对bt2
元素的点击会再次使所有前面的事件监听器再次运行,因为同一功能正在运行多次。 请告诉我是什么问题。
这是完整的代码:
(function()
{
if(window.addEventListener) window.addEventListener('load',init,false);
function init()
{ var i=0;
var get=document.getElementById('bt1').addEventListener('click',function() { pro(0);},false);
function pro(x)
{ alert('yeah');
if(!x) x=0
if(x!=0) //I dont want to remove event listener in the first time , so i want it to function with the next call to pro,in which the value of x is bigger than 0
{
//alert('right');
document.getElementById('bt2').removeEventListener('click',p,false); //event listener is not getting removed .
}
document.getElementById('bt2').innerHTML='this is a button '+x;
function passTo(y)
{
pro(y);
}
document.getElementById('bt2').addEventListener('click',p,false);
function p()
{ //document.getElementById('bt2').removeEventListener('click',p,false); //here the event listener is getting removed easily
passTo(x+1);
}
}
}
}());
removeEventListener
要求您向其传递相同的函数 ,但p
函数不相同:每次调用pro
都会创建一个新函数。 因此,您要删除的对象不是您添加的对象,因此也不会删除。
在 p
删除它是 p
,因为在每个p
函数中,标识符p
指的是特定的p
函数 。 因此,如果已添加该对象,它将成功删除自己。
您可以通过在函数上放置一个唯一标识符来证明这一点(请参见注释):
(function() { if (window.addEventListener) window.addEventListener('load', init, false); var functionId = 0; // Something to give us unique IDs function init() { var i = 0; var get = document.getElementById('bt1').addEventListener('click', function() { pro(0); }, false); function pro(x) { snippet.log('yeah'); // We ALWAYS to into the body of this if, the condition // is just here for emphasis if (!p.id) { p.id = ++functionId; } if (!x) x = 0 if (x != 0) { snippet.log("Removing #" + p.id); // <=== document.getElementById('bt2').removeEventListener('click', p, false); } document.getElementById('bt2').innerHTML = 'this is a button ' + x; function passTo(y) { pro(y); } snippet.log("Adding #" + p.id); // <=== document.getElementById('bt2').addEventListener('click', p, false); function p() { passTo(x + 1); } } } }());
<button id="bt1">bt1</button> <button id="bt2">bt2</button> <!-- Script provides the `snippet` object, see http://meta.stackexchange.com/a/242144/134069 --> <script src="//tjcrowder.github.io/simple-snippets-console/snippet.js"></script>
如果运行该命令并单击一次bt1
,然后重复单击bt2
,则会看到:
yeah Adding #1 yeah Removing #2 Adding #2 yeah Removing #3 Adding #3 yeah Removing #4 Adding #4
请注意,每次尝试删除与添加的功能不同的功能时,请注意。
如果要删除上一个,则需要在其他地方记住它(请参阅评论) :
(function() { if (window.addEventListener) window.addEventListener('load', init, false); var functionID = 0; var lastp = null; // <=== function init() { var i = 0; var get = document.getElementById('bt1').addEventListener('click', function() { pro(0); }, false); function pro(x) { snippet.log('yeah'); if (!p.id) { // Again, always true p.id = ++functionID; } if (!x) x = 0; if (lastp) // <=== { snippet.log("Removing #" + lastp.id); document.getElementById('bt2').removeEventListener('click', lastp, false); } document.getElementById('bt2').innerHTML = 'this is a button ' + x; function passTo(y) { pro(y); } lastp = p; // <=== snippet.log("Adding #" + p.id); document.getElementById('bt2').addEventListener('click', p, false); function p() { passTo(x + 1); } } } }());
<button id="bt1">bt1</button> <button id="bt2">bt2</button> <!-- Script provides the `snippet` object, see http://meta.stackexchange.com/a/242144/134069 --> <script src="//tjcrowder.github.io/simple-snippets-console/snippet.js"></script>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.