¿Alguien sabe de un jQuery o JavaScript nativas manera de permitir a los eventos de ratón a través de las capas? por ejemplo, habilitar un enlace debajo de un div.

Otras soluciones que no se pueden utilizar en mi caso:

InformationsquelleAutor davivid | 2010-06-10

6 Comentarios

  1. 35

    Usted puede hacer todo eso o simplemente puede usar esta hoja de estilo CSS para que la vid:

    pointer-events: none

    • Esto es ideal para los navegadores funciona en. Lo que no es, es decir.
    • Solución para Internet Explorer es un poco complicado, no se puede encontrar here
    • Referencia: IE11 no parecen apoyar esta propiedad, que es un poco de ayuda.
    • Soporte es bastante bueno.
  2. 15

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

    por favor, tenga en cuenta que yo sólo era la orientación de las nuevas versiones de Firefox y Chrome.

    • Esta debe ser la respuesta correcta. Me encuentro con este problema cuando se utiliza un SVG superpuesto sobre un lienzo. Nada, y me refiero a nada más (bibliotecas, CSS o de otro tipo) podría resolver esto, y este trozo de código anterior fue la única cosa que funciona a la perfección! Felicitaciones estimado Señor, muchas gracias!
    • también agrego && (!evento.repita)
    • ¿Cómo aplicaría usted esto?
    • Yo también estoy un poco confundido en cuanto a cómo implementar esto. Puede alguien explicar (o mostrar)?
    • la sustitución de destino con el evento.diana me estoy haciendo un dispatchEvent no es una función de error.
  3. 3

    Ahora hay un jQuery aplicación de la ExtJS envío de eventos de secuencia de comandos:

    JQuery Adelante Evento De Ratón Ejemplo

    • donde está el enlace de descarga o secuencia de comandos en la página para forwardMouseEvents()?
    • link muerto… No estoy seguro de lo útil que es (link actualizado para utilizar wayback machine).
  4. 2

    La jQuery Adelante Evento de Ratón ejemplo que aquí es parte de un marco más amplio, e incluso descubrir que gran parte de el sitio web fue una tarea.

    Por tanto, he reescrito el código como independiente, jQuery plugin.

    Aquí está el repositorio de Github:

    https://github.com/MichaelPote/jquery.forwardevents

    Por desgracia, el propósito yo lo estaba usando para superponer una máscara sobre los Mapas de Google no captura haga clic y arrastre los eventos, y el cursor no cambia que degrada la experiencia de usuario bastante que me decidí a ocultar la máscara bajo el IE y Opera – los dos navegadores lo que no apoyo a los eventos de puntero.

  5. 1

    Usted podría tratar de usar jquery para cambiar el z-index de la div cuando se pasa sobre ella, de modo que el enlace está temporalmente por encima del div al pasar el mouse sobre dicho div.

  6. 0

    Desde el JQuery Adelante Evento De Ratón Ejemplo link está muerto, escribí algunas código jQuery para manejar un caso sencillo:

    1. superposición div con una imagen transparente y no hay enlaces
    2. arpillera div con enlaces

    Objetivo: mantener la superposición visible, hacer vínculos de trabajo y el cursor cambia cuando a través de un enlace.

    Método: comparar la ubicación del ratón a cada enlace offset().

    Yo no manejar general de eventos de ratón, acabo de tratar los eventos que necesito ad-hoc. Así que es realmente una solución en lugar de la mejor solución, que se ocuparía de cada evento de ratón de manera abstracta, algo así como el uso de caracteres Comodín encima de quickDelegate() después de la comprobación de la geometría. También me preocupan sólo por ciertos elementos link, no el conjunto de capas DOM.

    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 geometría en la función ‘mouse_event_over_element()’ usted puede manejar otros eventos y elementos.

    Hacer: averiguar qué eventos de ratón desencadenar el texto de información sobre <a title="foo">, y trigger() de ellos, o de replicar mostrando la descripción. Mismo para la línea de estado.

    …………………………

    Editar 2014/09

    …………………………

    Usuario user2273627 sggested:

    Para el valor predeterminado descripción y estado de la línea que usted puede utilizar el z-index
    css-propiedad. Compruebe si el ratón está encima de un enlace y el conjunto de los z-index
    por ese enlace. $(this).css(‘z-index’,’9′); dicho de una persona cuando el ratón
    no es más de un elemento y el conjunto de los z-index para auto. Asegúrese de que establece
    el subyacente de los enlaces de la posición relativa en el css-archivo, de lo contrario
    z-index no funcionará.

Dejar respuesta

Please enter your comment!
Please enter your name here