event.clientX dans firefox.

Version imprimable

1 pièce(s) jointe(s)

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

J'ai fait cela :

Code:

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:
Pièce jointe 222538
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:

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:

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 !

Teste avec ceci

Code:

1
2
3
4
5
6
7
8
9
var mouse;
function storeMouse(e)
{
    if(!e) e = window.event;
    mouse = {clientX: e.clientX, clientX:e.clientY};
}
function test(e){
     alert(mouse.clientX);
}

13/10/2016, 10h06
franber48

Merci, je vais essayer.
Après essai, ca ne marche pas. A moins que je l'ai mal intégré dans mon script.
13/10/2016, 18h42
NoSmoking
Bonjour,
le plus simple que tu ais à faire et de passer l'événement à ta fonction dans ton javascript inline

Code:

<div id="allume" onclick="avance( event)">

et de le récupérer dans ta fonction
Code:

1 2 3 function avance( event){ // le code }
c'est pas très propre mais cela devrait fonctionner.
14/10/2016, 08h32
franber48

OK MERCI, je vais tester ça !
14/10/2016, 08h38
franber48

BRAVO. MERCI, ça marche et finalement, ce n'était pas compliqué mais pourquoi ne serait-ce pas très propre ?

MERCI encore !

Citation:

...mais pourquoi ne serait-ce pas très propre ?

parce qu'il est plus propre de séparer les différentess « couches », HTML-CSS-JS.
Cela pourrait donner quelque chose comme :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>Séparation des couches</title>
<style>
#move {
  position:absolute;
  border:1px solid #abc;
  width:5em;
  height:5em;
}
</style>
<script>
function avance(e){
  this.style.left = e.clientX +'px';
  this.style.top  = e.clientY +'px';
}
// Initialisation après chargement du DOM
document.addEventListener("DOMContentLoaded", function() {
  var oDiv = document.getElementById('move');
  oDiv.onclick = avance;
});
</script>
</head>
<body>
  <div id="move"></div>
</body>
</html>

PS : Pense à mettre la discussion en résolue.