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

我知道这个问题被回答了很多次，但我有一个不同的场景

我有一个要求，在mousehover上我需要更改图像的来源，在mouseout上我需要显示原始图像

我想在鼠标悬停时更改的图像来自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

检查（调用鼠标悬停的图像和鼠标当前位置相同）。

我将尝试类似的方法

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

---

url

变量来自哪里？你为什么要去拿？我认为只要替换

img

元素的

src

属性就可以了。URL是一种返回图像的服务。我已经将其定义为配置的一部分。是的，我只替换img src属性，但由于ajax调用，这需要一些时间。。所以前一个图像源在当前图像源上呈现。“URL是一个返回图像的服务”。你确定？我猜这是一个图像的url。你能确认吗？是的，URL是一个返回图像的服务。图像url位于数据对象（data.Image）中。谢谢！我会试试看，然后再给你回复。：）