Il cursore si reimposta automaticamente dopo l'aggiunta di eventi puntatore: nessuno in Firefox

Question

Ho riscontrato uno strano comportamento relativo alla relazione CSS tra le regole CSS pointer-events e cursor in Firefox. Quando imposto un valore cursor di un elemento su un valore diverso da auto (supponiamo che sia wait), il tipo di cursore cambia di conseguenza, come previsto. Tuttavia, quando aggiungo anche pointer-events: none allo stesso elemento, il cursore viene reimpostato su auto. Lo stesso succede se uso cursor: wait !important. Le stesse regole funzionano correttamente in Chromium e IE (!).

All'inizio ho pensato che questo potrebbe essere il comportamento previsto quando pointer-events: none è impostato, ma secondo la sezione MDN sul valore none:

L'elemento non è mai il bersaglio di eventi del mouse; tuttavia, gli eventi del mouse possono avere come target gli elementi discendenti se quei discendenti hanno eventi puntatore impostati su un altro valore. In queste circostanze, gli eventi del mouse attiveranno i listener di eventi su questo elemento padre come appropriato nel loro percorso verso/dalla discendente durante le fasi di acquisizione/bolla di eventi.

sembra che il Javascript eventi, non CSS eventi non saranno propagate.

La domanda è: c'è un modo per utilizzare sia pointer-events: none e cursor: wait sullo stesso elemento in Firefox? Inoltre, ho ragione riguardo all'interpretazione degli eventi Javascript/CSS riguardo l'estratto menzionato?

Se è importante, sto usando Firefox 31 su Ubuntu 64bit

Ecco un fiddle. In questo caso aggiungo le regole dinamicamente, ma lo stesso accade quando si usa solo il CSS. Lo scenario di cui sto parlando è Change cursor to wait --> Disable pointer events

Answer 1

Si scopre che è necessario impostare il cursore sull'elemento padre.

L'impostazione di entrambi gli stili su un elemento o il cursore sull'elemento nidificato reimposta il cursore sul puntatore predefinito.

<div class="cursor-wait"> 
    <a href="#">wait</a> 
    <div class="no-pointer-events"> 
     <a href="#">wait > no events</a><!-- works here --> 
    </div> 
</div> 

Vedere Fiddle per dettagli.