Cliquez sur par l'intermédiaire d'un DIV d'éléments qui sous-tendent

Question

J'ai un div qui a background:transparent, avec border. Au-dessous de cette div, j'ai plus d'éléments.

Actuellement, je suis en mesure de cliquer sur les éléments qui sous-tendent quand je clique en dehors de la superposition div. Cependant, je ne suis pas en mesure de cliquer sur les éléments qui sous-tendent en cliquant directement sur l'écran de superposition div.

Je veux être en mesure de cliquer à travers cette div , de sorte que je peux cliquer sur les éléments qui sous-tendent.

Answer 1

Oui, vous POUVEZ le FAIRE.

À l'aide de "pointer-events:none" avec CSS énoncés conditionnels pour IE, vous pouvez obtenir une croix navigateur compatible solution pour ce problème.

À l'aide de AlphaImageLoader vous pouvez même mettre transparent PNG/Gif dans le revêtement de la div et l'ont clique sur le flux grâce à des éléments en dessous.

CSS

pointer-events:none;
background:url('your_transparent.png');

IE conditionnel

filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='your_transparent.png', sizingMethod='scale');
background:none !important;

Voici un exemple de base de la page avec tout le code.

Greg

Answer 2

Cliquez sur par l'intermédiaire d'un DIV à l'élément sous-jacent des œuvres différentes dans les navigateurs. Opéra besoins manuel de réacheminement d'événement, Firefox et Chrome comprendre CSS pointer-events:none; et IE n'a pas besoin de quelque chose avec un fond transparent; avec, par exemple, background:white; opacity:0; filter:Alpha(opacity=0); IE besoins de transfert telles que l'Opéra.

Consultez la rubrique transfert de test à http://jsfiddle.net/vovcat/wf25Q/1/ et http://caniuse.com/pointer-events. Pointeur d'événements de la propriété CSS a été déplacé de CSS3-INTERFACE utilisateur pour CSS4-UI.

Answer 3

Je suis en ajoutant cette réponse parce que je n'ai pas la voir ici dans son intégralité. J'ai été en mesure de le faire à l'aide de elementFromPoint. Donc en gros:

-joindre un clic à la div vous voulez être cliqué par -masquer -déterminer quel élément le pointeur est sur -le feu-cliquez sur l'élément.

var range-selector= $("<div></div>")
        .css("position", "absolute").addClass("range-selector")
        .appendTo("<element to be on top of>")
        .click(function(e) {
            _range-selector.hide();
            $(document.elementFromPoint(e.clientX,e.clientY)).trigger("click");
        });;

Dans mon cas, la superposition de div est en position absolue si cela fait une différence, je ne suis pas sûr. Cela fonctionne sur IE8/9, Safari, Chrome et Firefox au moins.

Answer 4

Voici le polyfill pointeur-events: none; fonctionne sur IE avant le 11. https://github.com/kmewhort/pointer_events_polyfill

Answer 5

Je travaille actuellement avec de la toile de la parole de ballons. Mais parce que le ballon avec le pointeur est enveloppé dans un div, certains liens sous il ne sont pas capable de cliquer plus. Je ne peux pas utiliser extjs dans ce cas. Voir un exemple de base pour ma bulle tutoriel nécessite HTML5

J'ai donc décidé de collecter tous les lien les coordonnées de l'intérieur de l'ballons dans un tableau.

var clickarray=[];
function getcoo(thatdiv){
         thatdiv.find(".link").each(function(){
                 var offset=$(this).offset();           
                 clickarray.unshift([(offset.left),
                                     (offset.top),
                                     (offset.left+$(this).width()),
                                     (offset.top+$(this).height()),
                                     ($(this).attr('name')),
                                     1]);
                                     });
         }

J'appelle cette fonction sur chaque (nouveau) ballon. Il saisit les coordonnées du coin supérieur gauche et à droite/bas angles d'un link.class - en plus, le nom de l'attribut pour quoi faire si quelqu'un clique dans coordonne et j'ai adoré pour définir un 1, ce qui signifie qu'il n'a pas cliqué sur le jet. Et unshift ce tableau à la clickarray. Vous pouvez utiliser pousser trop.

Pour travailler avec ce tableau:

$("body").click(function(event){
          event.preventDefault();//if it is a a-tag
          var x=event.pageX;
          var y=event.pageY;
          var job="";
          for(var i in clickarray){
              if(x>=clickarray[i][0] && x<=clickarray[i][2] && y>=clickarray[i][1] && y<=clickarray[i][3] && clickarray[i][5]==1){
                 job=clickarray[i][4];
                 clickarray[i][5]=0;//set to allready clicked
                 break;
                }
             }
          if(job.length>0){   
             // --do some thing with the job --
            }
          });

Cette fonction preuves les coordonnées d'un organisme cliquez sur l'événement ou si elle était déjà cliqué et retourne le nom de l'attribut. Je pense qu'il n'est pas nécessaire d'aller plus loin, mais tu vois, ce n'est pas compliquer. L'espoir était anglais...