[英]Can't remove event listener
Can anyone tell why bt2
event listener is not getting removed in if
block. 谁能告诉为什么
bt2
事件侦听器未得到去除if
块。 As when I remove the event listener in the p
function, it's getting removed without any error or bug. 就像我在
p
函数中删除事件监听器一样,它被删除时没有任何错误或错误。 I am pretty sure there might be any stack or scope problem due to which event listener is not getting removed but I can't figure out what that could be. 我很确定可能由于没有删除事件监听器而导致任何堆栈或范围问题,但我不知道可能是什么。 And I know that event listener is not getting removed as with the succeeding clicks on
bt2
element all the preceding event listeners are also running again, as the same function is running multiple times. 而且我知道事件监听器并不会被删除,因为后续对
bt2
元素的点击会再次使所有前面的事件监听器再次运行,因为同一功能正在运行多次。 Please tell me what's the problem. 请告诉我是什么问题。
Here's the full code: 这是完整的代码:
(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
requires that you pass it the same function , but your p
functions are not the same: A new one is created every time pro
is called. removeEventListener
要求您向其传递相同的函数 ,但p
函数不相同:每次调用pro
都会创建一个新函数。 So the one you're trying to remove isn't the one you added, and so it isn't removed. 因此,您要删除的对象不是您添加的对象,因此也不会删除。
Removing it within p
works, because within each p
function, the identifier p
refers to that specific p
function . 在
p
删除它是 p
,因为在每个p
函数中,标识符p
指的是特定的p
函数 。 So if that one's been added, it will successfully remove itself. 因此,如果已添加该对象,它将成功删除自己。
You can prove this to yourself by putting a unique identifier on your function (see comments): 您可以通过在函数上放置一个唯一标识符来证明这一点(请参见注释):
(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>
If we run that and click bt1
once, then repeatedly click bt2
, we see: 如果运行该命令并单击一次
bt1
,然后重复单击bt2
,则会看到:
yeah Adding #1 yeah Removing #2 Adding #2 yeah Removing #3 Adding #3 yeah Removing #4 Adding #4
Note how each time we're trying to remove a different function than we added. 请注意,每次尝试删除与添加的功能不同的功能时,请注意。
If you want to remove the previous one, you need to remember it elsewhere (see comments) : 如果要删除上一个,则需要在其他地方记住它(请参阅评论) :
(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.