无法删除事件监听器

Question

有人可以说明为什么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);
                }

            }
        }
    }());

Answer 1

removeEventListener要求您传递相同的功能，但您的p功能不同：每次pro创建一个新功能调用。因此，您尝试删除的内容并不是您添加的内容，因此无法删除。

在 p中删除，因为在每个p函数中，标识符p指的是特定的p函数。因此，如果添加了那个，它将成功删除。

您可以通过在函数上添加唯一标识符来证明这一点（请参阅注释）：

＆＃13;

＆＃13;

(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);
            }

        }
    }
}());

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

如果我们运行并点击bt1一次，然后重复点击bt2，我们会看到：

yeah
Adding #1
yeah
Removing #2
Adding #2
yeah
Removing #3
Adding #3
yeah
Removing #4
Adding #4

请注意每次我们尝试删除与我们添加的不同的功能时。

如果你想删除前一个，你需要在别处记住它（见评论）：

＆＃13;

＆＃13;

(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);
            }

        }
    }
}());

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;