Question

我有两个Javascript文件，一个是React包装器，另一个是在React包装器中加载的原始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);
            });
        }

然后在react包装器中，我像这样处理事件：

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

发生此问题是因为dom加载后可能看起来像这样：

<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 {{1 }}，并且会导致错误。我不知道为什么或怎么发生。

为什么单击按钮时会触发错误事件？

0 个答案: