javascript - Cómo hacer que Internet Explorer emule los eventos de puntero: ¿ninguno?

html css

Question

Estoy trabajando en un proyecto en el que estamos mejorando los gráficos más altos al mostrar un PNG de degradado sobre los gráficos. Estamos utilizando pointer-events:none; CSS pointer-events:none; para permitirles a los usuarios interactuar con el gráfico a pesar de tener un div en capas en la parte superior. IE no reconoce pointer-events:none; , por lo que los usuarios de IE no pueden tener un diseño de gráfico mejorado o no pueden interactuar con los gráficos. Estoy buscando una forma de hacer que IE permita eventos de mouse (eventos específicamente hover), pasar a través de un div a los elementos debajo de él.

Puede ver un modelo de lo que estamos trabajando aquí: http://jsfiddle.net/PFKEM/2/

¿Hay alguna manera de hacer que IE haga algo así como pointer events:none; , donde los eventos del mouse atraviesan un elemento para que los elementos los pasen?

Answer 1

Acabo de pasar dos días investigando esto para un proyecto de IE10 (IE10 no admite los eventos de puntero: ninguna propiedad de CSS, MS votó por la retirada de la especificación debido a posibles problemas de clickjacking). La solución consiste en tener la etiqueta SVG INLINE y establecer los eventos de puntero en SVG. Seguí intentando usar, por ejemplo, una etiqueta IMG con SVG src, o una DIV con imagen de fondo configurada en un archivo SVG (donde usaría pointer-events = "none"), incluso datos SVG-uris, pero no funcionó. Se me ocurre que tenerlo en un elemento separado requiere precisamente la propiedad CSS de los eventos de puntero no implementados.

Entonces, necesitas un SVG básico como este: Primero algo de CSS, por ejemplo:

    .squareBottomRight {
        width: 50px;
        height: 50px;
        position: absolute;
        bottom: 0;
        right: 0;
    }

Y luego en HTML:

    <svg class="squareBottomRight" xmlns="http://www.w3.org/2000/svg"
        pointer-events="none">
        <rect id="test2_rect" x="0" y="0" width="50" height="50" fill="blue"/>
    </svg>

Referencia: https://bug-45467-attachments.webkit.org/attachment.cgi?id=67050

Answer 2

Agregar el siguiente CSS deshabilitará los punteros de ms.

#container{
    -ms-touch-action: none;
}

Answer 3

Aquí hay otra solución que es muy fácil de implementar con 5 líneas de código:

1. Capture el evento ''mousedown'' para el elemento superior (el elemento que desea desactivar los eventos de puntero).
2. En el ''mousedown'' esconde el elemento superior.
3. Use ''document.elementFromPoint ()'' para obtener el elemento subyacente.
4. Mostrar el elemento superior.
5. Ejecute el evento deseado para el elemento subyacente.

Ejemplo:

        //This is an IE fix because pointer-events does not work in IE
        $(document).on(''mousedown'', ''.TopElement'', function (e) {

            $(this).hide();
            var BottomElement = document.elementFromPoint(e.clientX, e.clientY);
            $(this).show();
            $(BottomElement).mousedown(); //Manually fire the event for desired underlying element

            return false;

        });

Answer 4

Espero que esto ayude :)

http://www.vinylfox.com/forwarding-mouse-events-through-layers/

También puedes probar una solución de JavaScript:

http://jsbin.com/uhuto

Answer 5

CSS:

#red_silk { 
  width:100%;
  background: url(''../img/red_silk.png'') no-repeat center top;
  height:393px;
  z-index: 2; 
  position: absolute; 
  pointer-events: none; 
}

ANTIGUO HTML:

<div id="red_silk"></div>

NUEVO HTML:

<svg id="red_silk"></svg>

Answer 6

Internet Explorer reconoce eventos de puntero: ninguno , pero solo para elementos SVG porque los eventos de puntero solo se especifican para elementos SVG en la especificación W3C ( http://www.w3.org/TR/SVG/interact.html#PointerEventsProperty ).

Puedes intentarlo con algo como esto ...

CSS:

#tryToClickMe{

        pointer-events: none;
        width: 400px;
        height: 400px;
        background-color: red;
    }

HTML:

<svg id="tryToClickMe"></svg>

Esto funciona en IE9 e IE10 (lo probé). Si aún no está utilizando elementos SVG, existe la posibilidad de ajustar sus elementos existentes en un SVG. La biblioteca jQuery proporciona un método de ajuste para eso ( http://api.jquery.com/wrap/ ).

Hay un artículo alemán muy bueno que ha desglosado las características de la propiedad de eventos del puntero: http://www.bennyn.de/programmierung/html/unterschiedliche-implementierungen-der-eigenschaft-pointer-events.html - Allí lo harás encontrar (con la ayuda de Google Translate) más información.

Espero poder ayudar

Benny

PD: si desea acceder a los objetos subyacentes y subyacentes, puede usar el método document.msElementsFromPoint en IE ( http://msdn.microsoft.com/de-DE/library/windows/apps/hh465811.aspx ). Le dará todas las capas en un punto dado en una matriz.

Answer 7

$.fn.passThrough = function (target) {
    var $target = $(target);
    return this.each(function () {
        var style = this.style;
        if (''pointerEvents'' in style) {
            style.pointerEvents = style.userSelect = style.touchCallout = ''none'';
        } else {
            $(this).on(''click tap mousedown mouseup mouseenter mouseleave'', function (e) {
                $target.each(function() {
                    var rect = this.getBoundingClientRect();
                    if (e.pageX > rect.left && e.pageX < rect.right &&
                        e.pageY > rect.top && e.pageY < rect.bottom)
                        $(this).trigger(e.type);
                });
            });
        }
    });
};

http://jsfiddle.net/yckart/BQw4U/

$(''.overlay'').passThrough(''.box'');
$(''.box'').click(function(){
    $(this).toggleClass(''active'');
});