Touchmove指针 - 事件:无CSS无法在Chrome for Android 4.4/ChromeView上运行

Question

我正在使用CSS指针事件通过透明div传递touchmove事件.除Android上的Chrome外,这种方式无处不在.我想知道这是否是Chrome的已知问题,以及是否有任何修复/解决方法.

此问题也会影响Cordova在Android 4.4上使用的ChromeView.早期版本的Android(和iOS)上的Cordova工作正常.但是,早期版本的Android上的Chrome仍会失败.

我有一个使用分层div的应用程序,我使用CSS:

pointer-events: none

所以我可以滚动或点击下面的div.

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

在非ChromeView浏览器上,底部的div是可滚动的.

在ChromeView浏览器(Chrome,Android 4.4上的Cordova)上,下面的div不可滚动.这是我需要解决的问题.

这里有一个例子:

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

注意,下面的div是可滚动的,可以通过'pointer-events:none'实现.

它适用于大多数设备(iOS 6-7,Android 4.1-4.2,Chrome Windows/Mac),但在Android 4.4和Chrome本身(适用于早期版本的Android)上的Cordova应用程序上运行失败.

我尝试在顶部div和底部div之间重新调度touchmove事件,但这似乎也不起作用.如果我重新发送点击/滚动事件就可以了,只是不要触摸.

Answer 1

我在这里使用解决方案解决了这个问题:https://stackoverflow.com/a/20387287/1876899

非常感谢用户wulftone!以某种方式阻止我的叠加上的默认touchStart事件允许交互通过并触发下面的事件.

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

或者在我的情况下,使用jQuery:

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