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

我知道这个问题已经回答了很多次，但我有不同的场景。如何在HTML DOM上找到鼠标位置

我有其中上mousehover我需要改变图像的源的要求，并在鼠标移开我需要显示原始图像。

，我想改变鼠标悬停的图像从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检查（鼠标悬停的图像，鼠标当前位置相同）。

来源

2017-10-05 Tavish Aggarwal

从哪儿来的'url'变量？为什么你需要取回？我认为只需要替换'img'元素的'src'属性就可以了。 – Bartheleway

URL是一种返回图片的服务。我已经将它定义为config的一部分。是的，我只替换img src属性，但由于ajax调用它需要一些时间..所以以前的图像源获取呈现在当前的图像源。 –

“网址是返回图片的服务”。你确定？我猜想这是一个图像的网址。你可否确认？ – Bartheleway

我会尝试这样的事情

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

来源

2017-10-05 13:17:47 Bartheleway

谢谢！我会尝试它，并会回复给你。 :) –

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

回答

相关问题