event.clientX dans firefox.

**franber48** · 12/10/2016, 17h15

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:
Nom : radiomp3.jpg
Affichages : 1200
Taille : 18,2 Ko

Nom : radiomp3.jpg
Affichages : 1200
Taille : 18,2 Ko

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 !

**SpaceFrog** · 12/10/2016, 17h18

Teste avec ceci

Code :

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

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

**franber48** · 13/10/2016, 10h06

Merci, je vais essayer.
Après essai, ca ne marche pas. A moins que je l'ai mal intégré dans mon script.

**NoSmoking** · 13/10/2016, 18h42

Bonjour,
le plus simple que tu ais à faire et de passer l'événement à ta fonction dans ton javascript inline

Code :

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

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

et de le récupérer dans ta fonction

Code :

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

1
2
3
function avance( event){
  // le code
}

c'est pas très propre mais cela devrait fonctionner.

**franber48** · 14/10/2016, 08h32

OK MERCI, je vais tester ça !

**franber48** · 14/10/2016, 08h38

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

MERCI encore !

**NoSmoking** · 15/10/2016, 08h06

...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 html :

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

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.

event.clientX dans firefox.

JavaScript

Discussions similaires

Partager

Partager