html如何获取鼠标,如何在HTML DOM上找到鼠标位置

我会尝试这样的事情

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

});