如何在 HTML DOM 上查找鼠标位置

Question

我知道这个问题被回答了很多次，但我有不同的情况。

我有一个需求，在鼠标悬停时我需要更改图像来源，而在鼠标悬停时我需要显示原始图像。

我想在鼠标悬停时更改的图像来自 GET 请求。请在下面找到伪代码：

document.getElementsByTagName('img').addEventListener('mouseover',function(event){
var source = event.currentTarget.src;
fetch(url).then(function(data) {
    source.setAttribute('src',data.image);
})
})

现在我的页面上有多个图像标签，我想在鼠标悬停时更改来源。
我面临的问题是，在鼠标悬停时，我在进行 ajax 调用时没有立即得到响应。因此，如果我将鼠标从一个图像快速移动到另一个图像，来自上一个图像的响应将显示在当前图像上。

如果有任何解决方案，请告诉我，我知道它理解起来有点复杂，但我真的需要帮助。

我正在考虑是否可以在更改图像源之前添加if检查（进行调用的悬停图像和鼠标的当前位置相同）。

Answer 1

我会尝试这样的事情

var imageChanger = function (elt, url) {
    fetch(url).then(function (data) {
        elt.src = data.image;
    };
}

document.getElementsByTagName('img').addEventListener('mouseover', function (event) {
    imageChanger(event.currentTarget, url);
});

这样做并且因为您有一个异步进程，您可能会遇到mouseleave 事件，该事件将在获取解决方案之前触发。这将使您的图像不会回到以前的图像。

我建议在您的代码中添加一些内容来防止这种情况发生。

你可以试试：

var imageChanger = function (elt, url) {
    elt.dataset.original = elt.src;
    elt.dataset.changed = true;

    if (elt.dataset.secondary) {
        elt.src = elt.dataset.secondary;
    } else {
        fetch(url).then(function (data) {
            if (elt.dataset.changed) elt.src = data.image;
            elt.dataset.secondary = data.image;
        }
    }
}

var imageRestore = function (elt) {
    elt.src = elt.dataset.original;
    elt.dataset.changed = false;
}

document.getElementsByTagName('img').addEventListener('mouseleave', function (event) {
    imageRestore (event.currentTarget);
});

document.getElementsByTagName('img').addEventListener('mouseover', function (event) {
    imageChanger(event.currentTarget, url);
});