无法删除事件侦听器
无法删除事件侦听器
提问于 2019-04-08 04:28:13
任何人都可以告诉为什么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);
}
}
}
}());
回答 1
Stack Overflow用户
发布于 2019-04-08 13:33:45
removeEventListener要求你传递相同的功能，但你的p功能不一样：每次pro调用时都会创建一个新功能。因此，您尝试删除的那个不是您添加的那个，因此它不会被删除。
在 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>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/-100006556
复制相关文章
相似问题
腾讯云开发者
