在某些上下文中，事件侦听器无法附加或删除

Question

我创建了一个脚本，默认情况下将事件侦听器附加到图片集合。当单击元素时，侦听器将切换到另一个事件，该事件更改图像源并将元素的id推入数组，如果单击已交换的图像，情况将逆转(源更改回来，数组中的最后一个元素被删除)。有一个按钮可以通过设置默认源和重置事件侦听器来"清除"所有图像，但它不可靠，有时会延迟触发，导致只收集系列中的最后一个元素。

TL;DR:一个事件在没有明显原因的情况下非常不可靠地触发，我很想知道为什么会发生这种情况以及我应该如何修复它。JSFiddle和已发布的版本如下:

我在这里上传了当前版本，您可以通过选择多个表，按"取消"，然后再次选择这些按钮来触发错误。通常，错误在第二次或第三次通过时开始。

我也有小提琴。

由于它是为手机屏幕设计的，所以在台式机和笔记本电脑上布局会有点古怪，但你可以看到问题并检查代码，所以这应该不是问题。

代码块:

取消所有选中的表:

    function tableClear() {
        //alert(document.getElementsByClassName('eatPlace')[tableResEnum].src);
        //numResTables = document.getElementsByClassName('eatPlace').src.length;
        tableArrayLength = tableArray.length - 1;
        for (tableResEnum = 0; tableResEnum <= tableArrayLength; tableResEnum += 1) {
            tableSrces = tableArray[tableResEnum].src;
            //alert(tableSrcTapped);
            if (tableSrces === tableSrcTapped) {
                tableArray[tableResEnum].removeEventListener('click', tableUntap);
                tableArray[tableResEnum].addEventListener('click', tableTap);
                tableArray[tableResEnum].src = window.location + 'resources/tableBase.svg';
            } /*else if () {
            }*/
        }
        resTableArray.splice(0, resTableArray.length);
    }

设置/取消指定表的设置:

    tableUntap = function () {
        $(this).unbind('click', tableUntap);
        $(this).bind('click', tableTap);
        this.setAttribute('src', 'resources/tableBase.svg');
        resTableArray.shift(this);
    };
    tableTap = function () {
        $(this).unbind('click', tableTap);
        $(this).bind('click', tableUntap);
        this.setAttribute('src', 'resources/tableTapped.svg');
        resTableArray.push($(this).attr('id'));
    };

将'eatPlace'类中的元素转换为数组:

        $('.eatPlace').bind('click', tableTap);
    tableList = document.getElementsByClassName('eatPlace');
    tableArray = Array.prototype.slice.call(tableList);

表实例化:

   for (tableEnum = 1; tableEnum <= tableNum; tableEnum += 1) {
        tableImg = document.createElement('IMG');
        tableImg.setAttribute('src', 'resources/tableBase.svg');
        tableImg.setAttribute('id', 'table' + tableEnum);
        tableImg.setAttribute('class', 'eatPlace');
        tableImg.setAttribute('width', '15%');
        tableImg.setAttribute('height', '15%');
        $('#tableBox').append(tableImg, tableEnum);
        if (tableEnum % 4 === 0) {
            $('#tableBox').append("n");
        }
        if (tableEnum === tableNum) {
            $('#tableBox').append("<div id='subbles' class='ajaxButton'>Next</div>");
            $('#tableBox').append("<div id='cazzles' class='ajaxButton'>Cancel</div>");
        }
    }

Answer 1

第一个错误是敲表和拆表

当你把Table压入数组时，你压入了它的ID。

resTableArray.push($(this).attr('id'));

它将根据用户单击表的顺序添加元素的id。在解锁时，它总是移除第一张桌子。https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/shift

resTableArray.shift(this);

因此，当用户单击表1、2、3时。如果不单击3，则移出表1

让我们通过删除未使用的表

来修复这个问题

tableUntap = function () {
    $(this).unbind('click', tableUntap);
    $(this).bind('click', tableTap);
    this.setAttribute('src', 'http://imgur.com/a7J8OJ5.png');
    var elementID = $(this).attr('id');
    var elementIndex = resTableArray.indexOf(elementID);
    resTableArray.splice(elementIndex, 1);
};

所以你在解锁后丢失了一些表。

让我们修复tableClear，

你有一个数组，里面有一些表，但是你在主数组中搜索。

function tableClear() {
    tableLen = resTableArray.length;
    for (var i = 0; i < tableLen; i++) {
        var idString = "#" + resTableArray[i];
        var $element = $(idString);
        $element.unbind('click', tableUntap);
        $element.bind('click', tableTap);
        $element.attr("src", 'http://imgur.com/a7J8OJ5.png');
    }
    resTableArray = [];
}

我只搜索被选中的表，然后取消选中它们并删除处理程序。小提琴:http://jsfiddle.net/r9ewnxzs/

您的错误是错误地删除了at untapping元素