css - significato - tag div di html




Fai clic su un DIV agli elementi sottostanti (10)

  1. Nascondi sovrapposizione dell'elemento
  2. Determina le coordinate del cursore
  3. Ottieni elementi su quelle coordinate
  4. Trigger clicca sull'elemento
  5. Mostra di nuovo l'elemento di sovrapposizione
    $('#elementontop).click(function (e) {
        $('#elementontop).hide();
        $(document.elementFromPoint(e.clientX, e.clientY)).trigger("click");
        $('#elementontop').show();
    });

Ho un div che ha background:transparent , insieme al border . Sotto questo div , ho più elementi.

Attualmente, sono in grado di fare clic sugli elementi sottostanti quando clicco all'esterno del div overlay. Tuttavia, non sono in grado di fare clic sugli elementi sottostanti quando si fa clic direttamente sul div overlay.

Voglio poter fare clic su questo div modo da poter fare clic sugli elementi sottostanti.


Attualmente lavoro con fumetti su tela. Ma poiché il fumetto con il puntatore è avvolto in un div, alcuni collegamenti sotto di esso non sono più in grado di fare clic. Non posso usare extjs in questo caso. Vedere l'esempio di base per il mio tutorial con fumetto vocale richiede HTML5

Così ho deciso di raccogliere tutte le coordinate del link all'interno dei palloncini in un array.

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

Io chiamo questa funzione su ogni (nuovo) fumetto. Cattura le coordinate degli angoli sinistro / superiore e destro / inferiore di un link.class - inoltre l'attributo name per cosa fare se qualcuno fa clic su quelle coordinate e mi è piaciuto impostare un 1 che significa che non è stato fatto clic sul jet . E spegni questa matrice al clickarray. Potresti usare anche push.

Per lavorare con quell'array:

$("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 --
            }
          });

Questa funzione prova le coordinate di un evento click del corpo o se è già stato cliccato e restituisce l'attributo name. Penso che non sia necessario andare più a fondo, ma vedi che non è complicato. La speranza è stata quella di ravvivare ...


Bello anche sapere ...
È possibile disabilitare gli eventi puntatore in un elemento padre (probabilmente div trasparente) ma averlo comunque abilitato per i suoi elementi figli.
Ciò è utile se si lavora con più livelli div sovrapposti, in cui si desidera essere in grado di fare clic su elementi secondari, mentre i livelli parent non reagiscono a nessun evento del mouse. Per questo tutti i div genitore ottengono pointer-events: none e i suoi figli cliccabili ottengono eventi pointer-events: auto riabilitati da pointer-events: auto

.parent {
    pointer-events:none;        
}
.child {
    pointer-events:auto;
}

<div class="some-container">
   <ul class="layer-0 parent">
     <li class="click-me child"></li>
     <li class="click-me child"></li>
   </ul>

   <ul class="layer-1 parent">
     <li class="click-me-also child"></li>
     <li class="click-me-also child"></li>
   </ul>
</div>

Fare clic su un DIV per l'elemento sottostante funziona in modo diverso nei browser. Opera ha bisogno di inoltro manuale degli eventi, Firefox e Chrome comprendono gli pointer-events:none; CSS pointer-events:none; e IE non ha bisogno di nulla con sfondo trasparente; con ad esempio background:white; opacity:0; filter:Alpha(opacity=0); background:white; opacity:0; filter:Alpha(opacity=0); IE ha bisogno di essere inoltrato come Opera.

Vedi test di inoltro su e . La proprietà CSS degli eventi puntatore è stata spostata dall'interfaccia utente di CSS3 all'interfaccia utente di CSS4.


Penso che event.stopPropagation(); dovrebbe essere menzionato anche qui. Aggiungi questo alla funzione Click del tuo pulsante.

Impedisce all'evento di ribollire nell'albero DOM, impedendo a qualsiasi gestore genitore di essere informato dell'evento.


Penso che tu possa considerare di cambiare il tuo markup. Se non sbaglio, ti piacerebbe mettere un livello invisibile sopra il documento e il tuo markup invisibile potrebbe precedere l'immagine del tuo documento (è corretto?).

Invece, propongo di mettere l'invisibile subito dopo l'immagine del documento ma cambiando la posizione in assoluto.

Si noti che è necessario un elemento genitore per avere posizione: relativo e quindi sarà possibile utilizzare questa idea. Altrimenti il ​​tuo livello assoluto verrà posizionato nell'angolo in alto a sinistra.

Un elemento di posizione assoluta è posizionato rispetto al primo elemento genitore che ha una posizione diversa da quella statica. Se non viene trovato alcun elemento di questo tipo, il blocco contenitore è html

Spero che questo ti aiuti. Vedi here per maggiori informazioni sul posizionamento CSS.


Sì, puoi farlo.

Usando gli pointer-events: none insieme alle istruzioni condizionali CSS per IE11 (non funziona in IE10 o sotto), è possibile ottenere una soluzione compatibile con più browser per questo problema.

Usando AlphaImageLoader , puoi persino inserire trasparenti .PNG/.GIF nel div overlay e far scorrere i clic sugli elementi sottostanti.

CSS:

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

IE11 condizionale:

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

Ecco una pagina di esempio di base con tutto il codice.


Sto aggiungendo questa risposta perché non l'ho vista qui per intero. Sono stato in grado di farlo utilizzando elementFromPoint. Quindi in poche parole:

  • allegare un clic al div con il quale si desidera essere cliccati
  • nascondilo
  • determinare su quale elemento si trova il puntatore
  • spara il click sull'elemento lì.
var range-selector= $("")
    .css("position", "absolute").addClass("range-selector")
    .appendTo("")
    .click(function(e) {
        _range-selector.hide();

        $(document.elementFromPoint(e.clientX,e.clientY)).trigger("click");
    });

Nel mio caso il div overlay è assolutamente posizionato - non sono sicuro che questo faccia la differenza. Funziona su IE8 / 9, Safari Chrome e Firefox almeno.


non funziona in questo modo. il lavoro attorno è quello di controllare manualmente le coordinate del clic del mouse contro l'area occupata da ciascun elemento.

l'area occupata da un elemento può essere trovata rilevata da 1. ottenendo la posizione dell'elemento rispetto all'angolo superiore sinistro della pagina e 2. la larghezza e l'altezza. una libreria come jQuery rende questo abbastanza semplice, anche se può essere fatto in js semplice. l'aggiunta di un gestore di eventi per mousemove sull'oggetto document fornirà aggiornamenti continui della posizione del mouse dalla parte superiore e dalla parte sinistra della pagina. decidere se il mouse si trova su un dato oggetto consiste nel controllare se la posizione del mouse si trova tra i bordi sinistro, destro, superiore e inferiore di un elemento.


per esempio, avvolgi un tag in tutto l'estratto html

<a href="/categories/1">
    <img alt="test1" class="img-responsive" src="/assets/photo.jpg" />
        <div class="caption bg-orange">
            <h2>
                test1
            </h2>
        </div>
</a>

nel mio esempio la mia classe di didascalia ha effetti al passaggio del mouse, che con gli eventi del puntatore: nessuno; semplicemente perderai

avvolgendo il contenuto manterrai i tuoi effetti al passaggio del mouse e potrai cliccare in tutte le foto, div inclusi, saluti!





css