Question

背景信息：我正在处理许多 div 并记录用户点击的特定 data-id 的 div。

我不知道为什么点击监听器在我第一次点击一个 div 时没有记录，但每隔一段时间就会记录一次。

例如，如果我导航到该页面并单击 div，则根本不会记录 data-id。

但是当我点击另一个 div 时，它确实被记录了下来。如果我继续点击另一个 div，它会被记录下来，依此类推。

如何修复它，以便每当我第一次导航到该页面并点击 div 时，数据都会被记录？

这是我的 JS 代码：

let img = document.getElementsByClassName('item');

let userClicked = function () {
    let attribute = this.getAttribute("data-id");
    console.log("clicked " + attribute);
}

for(let i = 0; i < img.length; i++) {
    img[i].addEventListener('click', userClicked, false);
}

Answer 1

在我看来问题出在其他地方。尝试检查是否有任何其他元素重叠或您的 JS 是否在正确的时间加载。您可以在此处查看示例代码。将其粘贴到单独的 html 文件中，它将完美运行。

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title>Image</title>
    <style>
        div {
            background-color:#eaeaea;
            margin-bottom:5px;
        }
    </style>
</head>
<body>
    <div data-id="1" class="item">1 </div>
    <div data-id="2" class="item">2 </div>
    <div data-id="3" class="item">3 </div>
    <div data-id="4" class="item">4 </div>
    <script>
        let img = document.getElementsByClassName('item');
        let userClicked = function () {
            let attribute = this.getAttribute("data-id");
            console.log("clicked " + attribute);
        }
        for (let i = 0; i < img.length; i++) {
            img[i].addEventListener('click', userClicked, false);
        }
    </script>
</body>
</html>

为什么点击监听器不会记录用户第一次点击 div 而是每隔一次记录一次？

1 个答案: