Comment trouver la position de la souris sur HTML DOM

Question

Je sais que cette question reçoit une réponse plusieurs fois, mais j'ai un scénario différent.

J'ai une exigence où sur mousehover j'ai besoin de changer la source de l'image, et sur le mouseout j'ai besoin d'afficher l'image originale.

L'image que je souhaite modifier lors du survol de la souris provient de la requête GET. S'il vous plaît trouver le code pseudo ci-dessous:

document.getElementsByTagName('img').addEventListener('mouseover',function(event){ 
var source = event.currentTarget.src; 
fetch(url).then(function(data) { 
    source.setAttribute('src',data.image); 
}) 
}) 

Maintenant, j'ai plusieurs balises d'image sur ma page, et je veux changer la source de la souris.
Le problème que je suis confronté est, sur la souris, je ne reçois pas de réponse immédiatement que je fais un appel ajax. Donc, si je déplace la souris très rapidement d'une image à l'autre, la réponse de l'image précédente s'affiche sur l'image actuelle. Faites-moi savoir la solution le cas échéant, je sais que c'est un peu compliqué à comprendre, mais j'ai vraiment besoin d'aide à ce sujet.

Je pense si je peux ajouter if vérifier (l'image sur laquelle planer l'appel est fait et la position actuelle de la souris est la même) avant de changer la source de l'image.

Answer 1

je vais essayer quelque chose comme ça

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

Cela parce que vous avez un processus asynchrone, vous pourriez avoir l'événement mouseleave qui déclenchera avant la résolution de la chercher. Cela fera que votre image ne reviendra pas à l'image précédente.

Je vais suggérer d'ajouter quelque chose à votre code pour éviter cela.

Vous pouvez essayer:

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