Question

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

我有一个要求在鼠标悬停时我需要更改图像源，在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检查（在其悬停时调用的图像和鼠标的当前位置相同）。

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

这样做并且因为您有一个异步进程，您可能会在解析fetch之前触发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上找到鼠标位置

1 个答案: