Почему при нажатии кнопки происходит неправильное событие? - PullRequest
Новая
       47

Почему при нажатии кнопки происходит неправильное событие?

0 голосов
/ 20 марта 2020

У меня есть два Javascript файла, один из них является оболочкой реагирования, другой является необработанным Javascript / html, который загружается в оболочку реагирования, поскольку Javascript / html является более старым кодом. В коде Javascript / html я пытаюсь прикрепить прослушиватели событий к каждой кнопке в <ul>: 

const previewItem = document.getElementsByClassName("previewItem");
        for (let i = 0; i < previewItem.length; i += 1) {
            previewItem[i].addEventListener('click', function(e) {
                var event = new Event('previewItem');
                previewItem[i].dispatchEvent(event);
            });
        }

А затем в оболочке реагирования я обрабатываю событие следующим образом: 

const handlePreviewItem = e => {
            this.showCompilationModal(
                e.target.getAttribute('data-previewId'),
            );
        };

        const previewItem = document.getElementsByClassName('previewItem');
        for (let i = 0; i < previewItem.length; i += 1) {
            previewItem[i].addEventListener('previewItem', handlePreviewItem);
        }

Проблема возникает из-за того, что при загрузке домен может выглядеть примерно так: 

<ul>
    <li><button data-previewId="1"></button></li>
    <li><button data-previewId="2"></button></li>
    <li><button data-previewId="3"></button></li>
</ul>
<ul>
    <li><button data-previewId="4"></button></li>
</ul>

и после перетаскивания из одного списка в другой он может выглядеть так: 

<ul>
    <li><button data-previewId="1"></button></li>
    <li><button data-previewId="2"></button></li>
</ul>
<ul>
    <li><button data-previewId="3"></button></li>
    <li><button data-previewId="4"></button></li>
</ul>

После перетаскивая из верхнего списка в нижний список и нажимая кнопку с data-previewId="3", e.target в showCompilationModal на самом деле является кнопкой после нее в DOM, которая является data-previewId="4", и это вызывает ошибку. Я не могу понять, почему или как это происходит.

...