desactiver la selection d'un texte (mais pas par onselectstart)

**Gzu51** · 09/08/2006, 17h58

Bon alors voila j'ai un problème sur lequel je me casse les dents :

Tout d'abord resumons la situation : j'ai 2 div, le premier contient du texte et est transparent (il ne sert qu'a afficher le texte), le deuxieme est vide et transparent (il me sert a créer une zone sensible et/ou a afficher des tooltips).

Ces deux div sont superposé en respectant bien le zIndex (le texte dessous et la zones sensible dessus) et tout se passe bien sauf que quand je passe ma souris sur le texte le curseur se transforme alors en curseur de selection et le div du dessus ne reagit plus aux clics...

Voici un exemple de code illustrant mon probleme :

Code :

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
30
31
32
<html>
 <head>
  <title>createLinearGradient() basic test</title>
 
 </head>
 <body>
  <script>
 
   var txt = document.createTextNode("Mon texte");
   var mondiv1 = document.createElement("div");
   mondiv1.getAttribute("style").setAttribute("position", "absolute");
   mondiv1.getAttribute("style").setAttribute("background", "transparent");
   mondiv1.getAttribute("style").setAttribute("left", "0px");
   mondiv1.getAttribute("style").setAttribute("top", "0px");
   mondiv1.getAttribute("style").setAttribute("width", "80px");
   mondiv1.getAttribute("style").setAttribute("height", "15px");
   mondiv1.getAttribute("style").setAttribute("zIndex",1);
   mondiv1.appendChild(txt);
   document.body.appendChild(mondiv1);
 
   var mondiv2 = document.createElement("div");
   mondiv2.getAttribute("style").setAttribute("left", "0px");
   mondiv2.getAttribute("style").setAttribute("top", "0px");
   mondiv2.getAttribute("style").setAttribute("width", "150px");
   mondiv2.getAttribute("style").setAttribute("height", "40px");
   mondiv2.getAttribute("style").setAttribute("zIndex",2);
   mondiv2.getAttribute("style").setAttribute("cursor","pointer");
   mondiv2.setAttribute("title","Mon tooltip");
   document.body.appendChild(mondiv2);
  </script>
 </body>
</html>

Je me permet de repondre par anticipation a ceux qui dirons qu'il suffit de mettre mon tooltips et ma zone sensible sur le meme div que le texte : j'ai besoin de pouvoir les positionner independament l'un de l'autre et mes zones sensibles ne sont pas toujours sur du texte.

Donc voila, existe-t-il un moyen de virer ce curseur de selection ? ou de rendre mon div du dessous (ou mon texte) insensibles aux evenements souris ?

Merci d'avance pour votre aide.

**FremyCompany** · 09/08/2006, 20h09

Qqchose dans ce gout la :

Code :

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

1
2
3
4
5
6
7
div.style.cursor="default";
div.onselectstart=function() {
    return false;
}
div.onmousedown=function() {
    return false;
}

Ou aussi :
ajouter un image transparente (gif) qui fasse la taille de la div du dessus et la recouvre entièrement, son zIndex doit etre prioritaire, c'est elle qui gère le onclick...

**Gzu51** · 10/08/2006, 11h15

Tout d'abord, merci de t'etre penché sur mon probleme.

J'avais deja essayer la première méthode que tu me donnes, je l'ai quand meme retestée par acquis de conscience :

Code :

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
30
31
32
33
34
35
36
37
38
39
40
<html>
 <head>
  <title>test</title> 
 </head>
 <body>
  <script>
 
   var txt = document.createTextNode("Mon texte");
   var mondiv1 = document.createElement("div");
   mondiv1.getAttribute("style").setAttribute("position", "absolute");
   mondiv1.getAttribute("style").setAttribute("background", "blue");
   mondiv1.getAttribute("style").setAttribute("left", "0px");
   mondiv1.getAttribute("style").setAttribute("top", "0px");
   mondiv1.getAttribute("style").setAttribute("width", "80px");
   mondiv1.getAttribute("style").setAttribute("height", "15px");
   mondiv1.getAttribute("style").setAttribute("zIndex",1);
   mondiv1.style.cursor="default";
   mondiv1.onselectstart=function() {
    return false;
   }
   mondiv1.onmousedown=function() {
    return false;
   }
   mondiv1.appendChild(txt);
   document.body.appendChild(mondiv1);
 
   var mondiv2 = document.createElement("div");
   mondiv2.onclick=function(){alert("ca marche");}
   mondiv2.getAttribute("style").setAttribute("position", "absolute");
   mondiv2.getAttribute("style").setAttribute("background", "transparent");
   mondiv2.getAttribute("style").setAttribute("left", "0px");
   mondiv2.getAttribute("style").setAttribute("top", "0px");
   mondiv2.getAttribute("style").setAttribute("width", "200px");
   mondiv2.getAttribute("style").setAttribute("height", "100px");
   mondiv2.getAttribute("style").setAttribute("zIndex",2);
   mondiv2.setAttribute("title","Mon tooltip");
   document.body.appendChild(mondiv2);
  </script>
 </body>
</html>

Cela permet bien de désactiver la selection et de transformer le curseur mais un click sur le texte ne declanche toujours pas l'evenement onclick du deuxieme div...

Par contre je n'avais pas pensé au coup de l'image transparente par dessus et ca marche nickel !!!!!

Ci-après le code avec l'image transparente par dessus... qui marche !!

Code :

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
30
31
32
33
<html>
 <head>
  <title>test</title> 
 </head>
 <body>
  <script>
 
   var txt = document.createTextNode("Mon texte");
   var mondiv1 = document.createElement("div");
   mondiv1.getAttribute("style").setAttribute("position", "absolute");
   mondiv1.getAttribute("style").setAttribute("background", "transparent");
   mondiv1.getAttribute("style").setAttribute("left", "0px");
   mondiv1.getAttribute("style").setAttribute("top", "0px");
   mondiv1.getAttribute("style").setAttribute("width", "80px");
   mondiv1.getAttribute("style").setAttribute("height", "15px");
   mondiv1.getAttribute("style").setAttribute("zIndex",1);
   mondiv1.appendChild(txt);
   document.body.appendChild(mondiv1);
 
   var mondiv2 = document.createElement("img");
   mondiv2.src="tr.gif";
   mondiv2.onclick=function(){alert("ca marche");}
   mondiv2.getAttribute("style").setAttribute("position", "absolute");
   mondiv2.getAttribute("style").setAttribute("left", "0px");
   mondiv2.getAttribute("style").setAttribute("top", "0px");
   mondiv2.getAttribute("style").setAttribute("width", "200px");
   mondiv2.getAttribute("style").setAttribute("height", "100px");
   mondiv2.getAttribute("style").setAttribute("zIndex",2);
   mondiv2.setAttribute("title","Mon tooltip");
   document.body.appendChild(mondiv2);
  </script>
 </body>
</html>

Un grand merci à toi Fremy !!

**FremyCompany** · 10/08/2006, 12h01

De rien,

bonne continuation

desactiver la selection d'un texte (mais pas par onselectstart)

JavaScript

Discussions similaires

Partager

Partager