coordonnées de la souris sur toile sans Jquery

Question

J'utilise actuellement:

e.pageX - $("#canvas").offset().left 

C'est la seule chose que je me sers pour Jquery, donc je préférerais réécrire cela en utilisant simplement javascript.

Que puis-je utiliser pour remplacer cela?

Answer 1

La réponse fournie par N Röhler fonctionne bien que dans Internet Explorer (avec quelques bugs avant IE8 - mais je pense qu'il a gagné n'est pas un problème pour vous puisque vous utilisez un canvas et pageX), et dans Opera si le padding est 0, et dans Safari/Chrome si la largeur de la bordure est égale à 0 aussi. Dans Firefox, malheureusement, offsetX et offsetY sont indéfinis. Kaninepete, je pense que vous devriez reconsidérer, pour des raisons de simplicité, la manière d'obtenir les coordonnées de la souris par rapport à votre élément de canevas. Tout ce que vous avez à faire est de calculer la position de la toile, ce qui est une tâche assez simple en utilisant .getBoundingClientRect() (aussi, n'oubliez pas d'ajouter des offsets de défilement si nécessaire), et soustrayez-le de pageX et pageY.

Answer 2

var x = e.offsetX, 
    y = e.offsetY; 

Mise à jour (encore une fois) pour (correct) Compatibilité Firefox:

var rect = e.target.getBoundingClientRect(); 
var x = e.offsetX || e.pageX - rect.left - window.scrollX, 
    y = e.offsetY || e.pageY - rect.top - window.scrollY; 

Answer 3

Vous pouvez le remplacer par le code ci-dessous

<canvas onmouseDown="mouseDown(event)" width="500" height="500"></canvas> 


function mouseDown(e) 
{ 
    var x=e.clientX-canvas.offsetLeft; 
    var y=e.clientY-canvas.offsetTop; 
}