Discussion :

[franber48]

Je cherche à récupérer la position X d'un click sur un div

J'ai fait cela :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

var sourisX = event.clientX;

et ça fonctionne très bien avec Chrome et Edge mais ca ne fonctionne pas avec Firefox.

Merci par avance à qui pourra m'aider.

Quelques précisions:
D'abord une image:

C'est un lecteur audio pour remplacer celui fourni par la balise html5 <audio> qui n'est pas terrible et qui simule un poste de radio à l'ancienne.
Sur l'image que vous voyez, tout est fonctionnel, boutons, barre d'avance qui s'allume ou s'éteint au démarrage.
L'aiguille rouge que vous voyez au milieu marque l'avancement de la lecteure du morceau.
Quand je clique sur la fenêtre de déroulement, je récupère la position di click et je fais avancer l'aiguille sur la position récupérée et l'avancement du morceau correspondant.
Tout cela fonctionne parfaitement sur CHROME et EDGE mais la récupération du click ne fonctionne pas avec FIREFOX, ce qui est regrtable tout de même.
Je vous livre mes codes:

Depuis ma page php, j'apelle ma fonction comme ceci:

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
<div id="allume" onclick="avance()">
<span id="aiguille">I</span>
</div>

Le span n'au aucune importance pour le sujet qui me préoccupe.
Voila maintenant ma fonction en Javascript;

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
function avance(){
	var divX = (document.getElementById("allume").offsetLeft);//Je récupère la position du div> de déroulement 
	var sourisX = event.clientX;//je récupère la position X du click
	var posClickX= sourisX-divX;// je calcule la position du click par rapport au <div> de déroulement
	document.getElementById("aiguille").style.marginLeft = posClickX+"px";//Je place mon aiguille a la position du click
	var nCurrentTime=Math.round((tt*posClickX)/140);// je calcule le currentTime proportionnel au click
	document.getElementById("myAudio").currentTime=nCurrentTime;// je fais avance le morceau à la position correspondante
}

Donc tout le problème est de récupérer ce que j’appelle "sourisX" à la troisième ligne.
Je n'ai pas réussi à intégrer la réponse que j'ai reçue, et dont je remercie chaleureusement l'auteur, dans mon javascript.

Merci à tous et à plus !