Cliquer au travers un div (z-index)

[Robinson]

Bonsoir,

Je rencontre une petite problématique.

J'ai plusieurs DIV avec différents z-index. Un DIV centré sur et suivant la souris se superpose donc aux autres.
J'ai besoin de cliquer "au travers" ce DIV et d'atteindre tout ce qui est en dessous.
Existe-t-il une solution ?

Merci.

 

[webmasterdemonsite]

impossible à mon avis...utilise map aera : http://www.zemage.org/a-Map+Area,+zones+cliquables+sur+une+image

 

[Robinson]

ça ne correspond pas au besoin.

Seule solution trouvée, demander à l'internaute un double clic avec le premier clic faisant disparaître le DIV souris.

C'est un peu gênant mais vu qu'il s'agit d'internautes réguliers, ils prendront vite le pli sur la petite application concernée.

Il y avait aussi une autre solution, mettre en semi transparence le DIV inférieur et lui mettre un z-index supérieur mais pas trop envie de m'embêter ainsi.

 

[Moof]

Autre idée, en javascript, mais je te laisse l'implémenter, pas forcément facile.

1 - Tu mets ton div supérieur sur écoute, pour détecter les clicks

<div id="le_div_superieur">

document.getElementById('le_div_superieur').onclick=clique;

2 - Dans ta fonction clique, tu calcules la position de la souris. Voici une fonction pour obtenir la coordonnée x de la position de la souris

function clique(e) {
  var x = getMouseX(e);
  ...
}
function getMouseX(e) {
  var x;
  e = e || window.event;
  if (e.pageX || e.pageY) {
    x = e.pageX;
  }
  else {
    var de = document.documentElement;
    var b = document.body;
    x = e.clientX + (de.scrollLeft || b.scrollLeft) - (de.clientLeft || 0);
  }
  return x;
}

Tu fais pareil avec la position y de la souris.

3 - Ensuite, tu testes si cette position (x,y) est au dessus de ton div inférieur (pour cela, il faut connaître ou récupérer la position et la taille de ton div inférieur). Si oui, alors tu lances l'action correpondante au clique au dessus de ton div inférieur.

Voilà, bon courage.

 

[Robinson]

J'y avais pensé mais n'ai même pas essayé.

Le DIV inférieur est une image "submit" de formulaire où je récupère les coordonnées du clic...
Bref pas trop envie de tripoter le tout.
Mais merci quand même.

 

[Scalpweb]

Si, c'est possible

Il faut utiliser la propriete CSS pointer-events :

div
{
pointer-events:none;
}

De cette maniere, le clic "passe au travers" du div.

 

[crick]

discussion ancienne, certes, mais qui vient de solutionner plusieurs heures de prise de tête. merci!

 

[Amauri]

Compatible uniquement à partir de la version 11 de IE http://caniuse.com/pointer-events