css - disable - pointer none html

Touchmove pointer-events: ninguno CSS no funciona en Chrome para Android 4.4/ChromeView

Question

Estoy usando eventos de puntero CSS para pasar eventos de movimiento a través de un div transparente. Esto funciona en todas partes, aparte de Chrome en Android. Me pregunto si este es un problema conocido con Chrome y si hay soluciones / soluciones provisionales.

Este problema también afecta a ChromeView, utilizado por Cordova en Android 4.4. Cordova en versiones anteriores de Android (y iOS) funciona bien. Sin embargo, Chrome en las versiones anteriores de Android seguirá fallando.

Tengo una aplicación que usa divs en capas, que uso con CSS:

pointer-events: none

entonces puedo desplazarme o hacer clic en la div inferior.

 ____________________
| top overlay div |
| _____________ |<-- pointer-events: none
| | underneath | |
| | div is | |
| | scrollable. | |
| |_____________| |
|____________________|

En los navegadores que no son ChromeView, la div debajo es desplazable.

En los navegadores ChromeView (Chrome, Cordova en Android 4.4), debajo de div no se puede desplazar. Esto es lo que necesito resolver.

Hay un ejemplo de esto aquí:

http://jsfiddle.net/TPkum/ o http://pmdx.me/scroll.html

Tenga en cuenta que el div inferior es desplazable, hecho posible por ''pointer-events: none''.

Funciona bien en la mayoría de los dispositivos (iOS 6-7, Android 4.1-4.2, Chrome Windows / Mac), pero falla en mi aplicación Cordova en Android 4.4 y Chrome en sí (para versiones anteriores de Android).

He intentado redistribuir los eventos de movimiento entre los divisores div y bottom div, pero eso tampoco parece funcionar. Si vuelvo a enviar los eventos de clic / desplazamiento, está bien, simplemente no lo toco.

¡Cualquier consejo sería muy apreciado! Gracias.

Answer 1

Lo solucioné usando la solución aquí: https://stackoverflow.com/a/20387287/1876899

¡Muchas gracias usuario wulftone ! De alguna manera, la prevención del evento touchStart predeterminado en mi superposición permitió que la interacción pasara y activara los eventos a continuación.

overlay.addEventListener(''touchstart'', function(e){
e.preventDefault();
});

o en mi caso, con jQuery:

$(''.frame-overlay'').on(''touchstart'', function(e){
e.preventDefault();
});