Inoltro di eventi del mouse tramite layer/div

Question

Qualcuno conosce un modo jQuery o nativo JavaScript per abilitare gli eventi del mouse attraverso i livelli? per esempio. abilitare un collegamento sotto a div.

Altre soluzioni che non possono utilizzare nel mio caso:

• A simple way, anche se con non realmente supportato pointer-events (modifica come del 2017, widely supported)
• An ExtJS solution

Answer 1

Si potrebbe provare usando jquery per cambiare lo z-index del div quando passi il mouse su di esso, in modo che il collegamento sia temporaneamente sopra il div mentre si passa con il mouse sopra div.

Answer 2

L'ho fatto una volta. Ecco il codice:

quickDelegate = function(event, target) { 
      var eventCopy = document.createEvent("MouseEvents"); 
      eventCopy.initMouseEvent(event.type, event.bubbles, event.cancelable, event.view, event.detail, 
       event.pageX || event.layerX, event.pageY || event.layerY, event.clientX, event.clientY, event.ctrlKey, event.altKey, 
       event.shiftKey, event.metaKey, event.button, event.relatedTarget); 
      target.dispatchEvent(eventCopy); 
      // ... and in webkit I could just dispath the same event without copying it. eh. 
     }; 

si prega di notare che ero solo il targeting nuove versioni di Firefox e Chrome.

Answer 3

Ora c'è un'implementazione jQuery dello script inoltro di eventi ExtJS:

JQuery Forward Mouse Event Example

Answer 4

Dato il legame JQuery Forward Mouse Event Example è attualmente morto, ho scritto un po 'di codice jQuery per trattare un caso semplice:

1. overlay div con un'immagine trasparente e nessun collegamento
2. underlay div con link

Obiettivo: mantenere visibile la sovrapposizione, fare in modo che i collegamenti funzionino e che il cursore cambi quando si trova su un collegamento.

Metodo: confrontare la posizione del mouse con ciascun collegamento offset().

Non gestisco gli eventi generali del mouse, tratta solo gli eventi che mi servono ad-hoc. Quindi è davvero una soluzione alternativa al posto della soluzione migliore, che gestirà in modo astratto ogni evento del mouse, qualcosa come l'utilizzo di quickDelegate() sopra Wildcard dopo aver controllato la geometria. Inoltre mi preoccupo solo di determinati elementi di collegamento, non dell'intero DOM a più livelli.

function mouse_event_over_element(evt, elem) { 
    var o= elem.offset(); 
    var w= elem.width(); 
    var h= elem.height(); 
    return evt.pageX >= o.left && evt.pageX <= o.left + w && evt.pageY >= o.top && evt.pageY <= o.top + h; 
} 

$(overlay_selector).click(function(e){ 
    $(underlay_selector + ' a').each(function() { 
    if (mouse_event_over_element(e, $(this))) { 
     // $(this).click(); // trigger a jQuery click() handler 
     // quickDelegate(e, this); // not in IE8 
     // this.click(); // maybe not in Mozilla pre-HTML5 
     window.location.href= this.href; 
     return false; 
    } 
    }); 
}); 

$(overlay_selector).mousemove(function(e){ 
    var newcursor= 'default'; 
    $(underlay_selector + ' a').each(function() { 
    if (mouse_event_over_element(e, $(this))) { 
     newcursor= 'pointer'; 
     // $(this).mouseenter(); // trigger a one-argument jQuery hover() event (no mouseleave) 
     return false; 
    } 
    }); 
    $(overlay_selector).css('cursor', newcursor); 
}); 

Utilizzando la funzione 'mouse_event_over_element()' geometria è possibile gestire altri eventi ed elementi.

Da fare: capire quali eventi del mouse attivano il suggerimento su <a title="foo"> e attivarli() oppure replicare mostrando il suggerimento. Lo stesso per la riga di stato.

..............................

Modifica 2014/09

.. ............................

user2273627 utente sggested:

Per il tooltip predefinito e lo stato-line è possibile utilizzare lo z-index css-proprietà. Controlla se il mouse si trova su un collegamento e imposta lo z-index per quel collegamento. $ (Questo) css ('z-index', '9'); Metti un altro quando il mouse non si trova su un elemento e imposta z-index su auto. Assicurati di impostare la posizione dei link sottostanti: relativa nel file css, altrimenti z-index non funzionerà.

Answer 5

Il numero jQuery Forward Mouse Event example fornito qui fa parte di un quadro più ampio e anche solo capire che molto da questo sito Web è stato un lavoro ingrato.

Ho quindi riscritto il codice come plug-in jQuery autonomo.

Ecco il repository GitHub:
https://github.com/MichaelPote/jquery.forwardevents

Purtroppo, lo scopo stavo usando per - sovrapporre una maschera sul Google Maps non ha catturato fare clic e trascinare gli eventi, e il cursore del mouse non cambia, che degrada il esperienza utente abbastanza che ho appena deciso di nascondere la maschera sotto IE e Opera - i due browser which dont support pointer events.

Answer 6

si può fare tutto quello che o si può semplicemente utilizzare questo CSS per questo div:

pointer-events: none