suivi de la souris sur IE

Question

Considérons l'extrait suivant:

$(document).bind('mousemove', function(e) 
       { 
        $('#someDiv').css({left: e.pageX+'px', top: e.pageY+'px'}); 
       }); 

Cela devrait faire #someDiv suivre la souris (infobulle), lorsque la valeur de css « position » est réglé sur absolu.

Fonctionne comme prévu, sauf lorsque vous effectuez un zoom avant ou arrière dans IE7 (ne tentez pas d'autre version d'IE). Ensuite, le e.pageX est complètement éteint. Plus vous zoomez (en utilisant votre molette mouse + CTRL), plus le positionnement est important.

J'ai essayé de briser les démos de l'interface utilisateur de jQuery (curseurs) et il semble que même les gars de jQuery n'ont pas compris cela. Y at-il un génie là-bas qui sait comment réparer cette vilaine chose?

Merci d'avance!

Answer 1

Essayez le code HTML suivant:

<div id="one" style="top:2px;left:10%;width:10px;height:10px;background:blue; position:absolute;"> </div> 
<div id="two" style="top:2px;width:10px;height:10px;background:red;position:absolute;"> </div> 

<div id="log" style="margin-top:25px;"> </div> 

avec le script suivant:

document.getElementById("two").style.left = document.getElementById("one").offsetLeft + "px"; 
var zoom = 0; 

setInterval(function() { 
    var newZoom = document.getElementById("two").offsetLeft/document.getElementById("one").offsetLeft; 



if (newZoom == zoom) return; 
    zoom = newZoom; 



document.getElementById("log").innerHTML += zoom + "<br>"; 
}, 200); 

Et il présente une méthode de calcul de l'échelle de niveau de zoom dans le navigateur.

Je pense que si vous apportez dans ce paramètre dans votre calcul, il vous aidera à

désolé j'ai posté une nouvelle réponse, mais la boîte de commentaire n'a pas été apportais le bouton extrait de code

Answer 2

Si vous obtenez à chaque instant la largeur du client d'un élément de référence dans le navigateur et que vous le divisez par la taille d'origine de ces éléments, vous pouvez obtenir l'échelle selon laquelle le zoom a augmenté ou diminué. Par conséquent, si vous ajoutez ce paramètre pour être toujours multiplié dans vos calculs, vos valeurs devraient être mises à jour en conséquence pour incorporer l'échelle de la page dans votre mousemove. Je l'ai dit sans réellement réécrire le code moi-même, mais cela ne semble pas être difficile pour vous.