Come rendere Internet Explorer emulare eventi puntatore: nessuno?

Question

Sto lavorando a un progetto in cui stiamo migliorando i diagrammi elevati visualizzando un gradiente PNG sopra i grafici. Stiamo utilizzando i CSS pointer-events:none; per consentire agli utenti di interagire con il grafico nonostante ci sia un div diviso in alto. IE non riconosce pointer-events:none;, quindi gli utenti su IE non possono avere un design grafico avanzato o non possono interagire con i grafici. Sto cercando un modo per ottenere IE per consentire eventi del mouse (in particolare eventi hover), per passare attraverso un div agli elementi sotto di esso.

Si può vedere un modello di ciò che stiamo lavorando con qui: http://jsfiddle.net/PFKEM/2/

C'è un modo per ottenere IE per fare qualcosa di similepointer events:none;, in cui gli eventi del mouse passano attraverso un elemento di elementi che li soffiare ?

Answer 1

Spero che questo aiuti :)

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

si può anche provare una soluzione javascript:

http://jsbin.com/uhuto

Answer 2

appena trascorso due giorni la ricerca di questo per un progetto di IE10 (IE10 doesn' t supportare gli eventi pointer: nessuna proprietà CSS, MS ha votato per il ritiro delle specifiche a causa di possibili problemi di clickjacking). La soluzione alternativa consiste nell'avere un tag SVG INLINITO e impostare gli eventi puntatore in SVG. Continuavo a provare ad usare per es. un tag IMG con SVG src, o un DIV con background-image impostato su un file SVG (dove userei pointer-events = "none"), anche SVG data-uris, ma non mi è venuto in mente che avere in un elemento separato richiedeva esattamente la proprietà CSS degli eventi pointer non implementata.

quindi è necessario uno SVG ridotto all'osso in questo modo: prima un po 'di CSS ad esempio:

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

E poi in 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> 

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

Answer 3

Internet Explorer riconosce gli eventi del puntatore: nessuno, ma solo per gli elementi SVG poiché gli eventi puntatore sono specificati solo per gli elementi SVG nel W3C specifica (http://www.w3.org/TR/SVG/interact.html#PointerEventsProperty).

Si può provare con qualcosa di simile ...

CSS:

#tryToClickMe{ 

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

HTML:

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

Questo funziona in IE9 e IE10 (ho provato esso). Se non si stanno ancora utilizzando gli elementi SVG, è possibile posizionare gli elementi esistenti in un file SVG. La libreria jQuery fornisce un metodo di avvolgimento per quello (http://api.jquery.com/wrap/).

C'è un ottimo articolo tedesco che ha suddiviso le caratteristiche della proprietà di eventi pointer: http://www.bennyn.de/programmierung/html/unterschiedliche-implementierungen-der-eigenschaft-pointer-events.html - Qui troverete (con l'aiuto di Google Traduttore) ulteriori informazioni.

Speranza ho potuto fare a

Benny

P.S. Se si desidera accedere a oggetti sovrastanti e sottostanti, è possibile utilizzare il metodo document.msElementsFromPoint in IE (http://msdn.microsoft.com/de-DE/library/windows/apps/hh465811.aspx). Vi darà tutti i livelli su un dato punto in un array.

Answer 4

Ecco un'altra soluzione che è molto facile da implementare con 5 righe di codice:

1. catturare l'evento 'mousedown' per l'elemento superiore (l'elemento che si desidera disattivare eventi del puntatore).
2. Nel "mouse" nasconde l'elemento superiore.
3. Utilizzare 'document.elementFromPoint()' per ottenere l'elemento sottostante.
4. Mostra l'elemento superiore.
5. Esegui l'evento desiderato per l'elemento sottostante.

Esempio:

 //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 5

$.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'); 
}); 

Answer 6

aggiunta dei seguenti CSS disabiliterà ms puntatori.

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

Answer 7

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

VECCHIO HTML:

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

NUOVO HTML:

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