css alternativa alla proprietà 'pointer-events' per IE

Ho un menu di navigazione a discesa in cui parte del titolo non dovrebbe passare ad un'altra pagina quando viene cliccato (questi titoli aprono un menu a discesa quando si fa clic) mentre altri dovrebbero navigare (questi non hanno menu a discesa e navigare direttamente). i tipi li hanno hrefdefiniti

Per risolvere questo ho aggiunto i seguenti css per il precedente tipo di titoli

pointer-events: none;

e funziona benissimo. Ma poiché questa proprietà non è supportata da IE, sto cercando qualche soluzione. La cosa fastidiosa è che non ho accesso e privilegio per cambiare completamente il codice HTML e JavaScript .

Qualche idea?

Pointer-events è un hack di Mozilla e dove è stato implementato nei browser Webkit, non puoi aspettarti di vederlo nei browser IE per un altro milione di anni.

C'è comunque una soluzione che ho trovato:

Inoltro di eventi del mouse tramite livelli

Questo utilizza un plugin che utilizza alcune proprietà non ben note / comprese di Javascript per prendere l'evento del mouse e inviarlo a un altro elemento.

C'è anche un'altra soluzione Javascript qui .

Aggiornamento per ottobre 2013 : apparentemente arriverà a IE nella v11. Fonte . Grazie Tim.

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

1. Cattura l'evento 'mousedown' per l'elemento superiore (l'elemento che desideri disattivare gli eventi puntatore).
2. Nel 'mousedown' nascondi l'elemento in alto.
3. Utilizzare 'document.elementFromPoint ()' per ottenere l'elemento sottostante.
4. Scopri l'elemento in alto.
5. Eseguire 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;

});

C'è una soluzione alternativa per IE: usa SVG in linea e imposta pointer-events = "none" in SVG. Vedi la mia risposta in Come far sì che Internet Explorer emuli eventi puntatore: nessuno?

Vale la pena ricordare che specificamente per IE, disabled=disabledfunziona per i tag di ancoraggio:

<a href="contact.html" onclick="unleashTheDragon();" disabled="disabled">Contact</a>

IE considera questo come un disabledelemento e non attiva un evento clic. Tuttavia, disablednon è un attributo valido su un tag anchor. Quindi questo non funzionerà in altri browser. Per loro pointer-events:noneè richiesto nella progettazione.

UPDATE 1 : Così l'aggiunta seguente regola si sente come una soluzione cross-browser per me

Update 2 : Per ulteriori compatibilità, perché IE non si formerà stili per tag di ancoraggio con disabled='disabled', in modo che sarà ancora guardare attiva. Pertanto, a:hover{}regola e stile sono una buona idea:

a[disabled="disabled"] {
        pointer-events: none; /* this is enough for non-IE browsers */
        color: darkgrey;      /* IE */
    }
        /* IE - disable hover effects */   
        a[disabled="disabled"]:hover {
            cursor:default;
            color: darkgrey;
            text-decoration:none;
        }

Funziona su Chrome, IE11 e IE8.
Naturalmente, sopra CSS si presuppone che i tag di ancoraggio siano resi condisabled="disabled"

Ecco un piccolo script che implementa questa funzione (ispirato all'articolo del blog di Shea Frederick che Kyle menziona):

• Puntatore Eventi Polyfill .

Coprire gli elementi offensivi con un blocco invisibile, usando uno pseudo elemento: :beforeo:after

a:before {
//IE No click hack by covering the element.
  display:block;
  position:absolute;
  height:100%;
  width:100%;
  content:' ';
}

In questo modo il tuo clic atterra sull'elemento principale. Non va bene, se il genitore è cliccabile, ma funziona bene altrimenti.

Ho trascorso quasi due giorni a trovare la soluzione a questo problema e alla fine l'ho trovato.

Questo utilizza javascript e jquery.

(GitHub) pointer_events_polyfill

Questo potrebbe utilizzare un plug-in javascript per essere scaricato / copiato. Basta copiare / scaricare i codici da quel sito e salvarlo come pointer_events_polyfill.js. Includi quel javascript sul tuo sito.

<script src="JS/pointer_events_polyfill.js></script>

Aggiungi questi script jquery al tuo sito

$(document).ready(function(){
    PointerEventsPolyfill.initialize({});
});

E non dimenticare di includere il plug-in jquery.

Funziona! Posso fare clic sugli elementi sotto l'elemento trasparente. Sto usando IE 10. Spero che possa funzionare anche in IE 9 e versioni precedenti.

MODIFICA: l' utilizzo di questa soluzione non funziona quando si fa clic sulle caselle di testo sotto l'elemento trasparente. Per risolvere questo problema, utilizzo lo stato attivo quando l'utente fa clic sulla casella di testo.

Javascript:

document.getElementById("theTextbox").focus();

JQuery:

$("#theTextbox").focus();

Ciò consente di digitare il testo nella casella di testo.

Ho trovato un'altra soluzione per risolvere questo problema. Uso jQuery per impostare href-attribute su javascript:;(non '', oppure il browser ricaricherà la pagina) se la larghezza della finestra del browser è maggiore di 1'000px. Devi aggiungere un ID al tuo link. Ecco cosa sto facendo:

// get current browser width
var width = $(window).width();
if (width >= 1001) {

    // refer link to nothing
    $("a#linkID").attr('href', 'javascript:;'); 
}

Forse è utile per te.

Uso OnClientClick = "return false;"

Puoi anche "non" aggiungere un URL all'interno del <a>tag, lo faccio anche per i menu che sono <a>guidati da tag con menu a discesa. Se non è presente il menu a discesa, aggiungo l'URL, ma se ci sono dei menu a discesa con un <ul> <li>elenco, lo rimuovo.

Ho affrontato problemi simili:

1. Ho affrontato questo problema in una direttiva, l'ho risolto aggiungendo a come elemento padre e creando eventi puntatore: nessuno per quello

2. La correzione precedente non ha funzionato per il tag select, quindi ho aggiunto il cursore: text (che era quello che volevo) e ha funzionato per me

Se è necessario un cursore normale, è possibile aggiungere il cursore: impostazione predefinita

Soluzione migliore:

.disabled{filter: alpha(opacity=50);opacity: 0.5;z-index: 1;pointer-events: none;}

Funziona perfettamente su tutti i browser