Reenvío de eventos de mouse a través de layers/divs

Question

¿Alguien sabe de una forma jQuery o JavaScript nativa para habilitar eventos de mouse a través de capas? p.ej. habilitar un enlace debajo de div.

Otras soluciones que no pueden usar en mi caso:

• A simple way, aunque el uso no es realmente el apoyo pointer-events (edición partir de 2017, widely supported)
• An ExtJS solution

Answer 1

Usted podría intentar usando jquery para cambiar el índice z del div cuando pasas el cursor sobre él, de modo que el enlace esté temporalmente sobre el div mientras se desplaza sobre dicho div.

Answer 2

Lo hice una vez. Aquí está el código:

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. 
     }; 

tenga en cuenta que solo tenía como objetivo nuevas versiones de Firefox y Chrome.

Answer 3

Ahora hay una aplicación jQuery del guión reenvío de eventos ExtJS:

JQuery Forward Mouse Event Example

Answer 4

Desde el enlace JQuery Forward Mouse Event Example es actualmente muerto, he escrito algo de código jQuery para manejar un caso simple:

1. div de superposición con una imagen transparente y sin enlaces
2. div subyacente con enlaces

Objetivo: mantener la superposición visible, hacer que los enlaces funcionen y que el cursor cambie cuando se pasa por un enlace.

Método: compare la ubicación del mouse con cada desplazamiento de enlace().

No manejo eventos generales de mouse, solo trato los eventos que necesito ad-hoc. Por lo tanto, es realmente una solución en lugar de la mejor solución, que manejaría todos los eventos del mouse de forma abstracta, algo así como usar el anterior WildDelegate() después de verificar la geometría. Además, solo me preocupan ciertos elementos de enlace, no todo el DOM en capas.

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

Uso de la función 'mouse_event_over_element()' geometría que puede manejar otros eventos y elementos.

Hacer: averiguar qué eventos del mouse desencadenan la información sobre herramientas en <a title="foo"> y desencadenarlos() o replicar mostrando la información sobre herramientas. Lo mismo para la línea de estado.

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

Edición 2014/09

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

user2273627 usuario sggested:

Para la descripción por defecto y línea de estado se puede utilizar el índice z CSS-propiedad. Compruebe si el mouse está sobre un enlace y configure el z-index para ese enlace. $ (this) .css ('z-index', '9'); Ponga otro cuando el mouse no esté sobre un elemento y establezca el índice z en automático. Asegúrese de colocar la posición subyacente enlaces: relativa en el css-archivo, de lo contrario z-index no funcionará.

Answer 5

El jQuery Forward Mouse Event example dada aquí es parte de un marco más amplio e incluso acaba de averiguar que gran parte hacia fuera de la página web que se dio fue una tarea.

Por lo tanto, volvieron a escribir el código como un plugin de jQuery independiente.

Aquí está el repositorio de Github:
https://github.com/MichaelPote/jquery.forwardevents

Por desgracia, el propósito que estaba usando para - superponer una máscara sobre Google Maps no capturó clic y arrastrar eventos, y el cursor del ratón no cambia lo que degrada la experiencia de usuario suficiente como para decidir ocultar la máscara en IE y Opera: los dos navegadores which dont support pointer events.

Answer 6

Usted puede hacer todo eso o simplemente puede utilizar este CSS para que div:

pointer-events: none