Javascript 为什么在单击按钮时触发错误的事件？

我有两个Javascript文件，一个是react包装器，另一个是react包装器中加载的原始Javascript/html，因为Javascript/html是较旧的代码。在Javascript/html代码中，我尝试将事件侦听器附加到

中的每个按钮：

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 previewItem=document.getElementsByClassName（“previewItem”）；
for（设i=0；i

然后在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);
        }

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

const handlepreviewintem=e=>{
这是showCompilationModal(
e、 target.getAttribute（'data-previewId'），
);
};
const previewItem=document.getElementsByClassName（'previewItem'）；
for（设i=0；i

出现此问题的原因是，onload dom可能如下所示：

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>

从一个列表拖动到另一个列表后，它可能会如下所示：

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”

按下按钮后，

showcomilationmodal

中的

e.target

实际上是dom中它后面的按钮，即

data previewId=“4”

，它会导致一个错误。我不知道这是为什么或如何发生的。

如果您使用父

ul

元素而不是子

li

元素，您的问题可以得到解决（代码也大大简化），因为这样一来，无论

li

在哪个列表中都不重要。还有，谢谢，我已经按照你的建议开始工作了！也不确定为什么要在react中绑定这样的事件。