如何在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上找到鼠標位置

回答

相關問題