如何在 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);
});

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

How to find mouse position on HTML DOM

javascript

ajax

fetch-api