css - Touchmove 指针事件 : none CSS doesn't work on Chrome for Android 4. 4/ChromeView

Question

我正在使用 CSS pointer-events 通过透明的 div 传递 touchmove 事件。除了 Android 上的 Chrome 之外，这在任何地方都适用。我想知道这是否是 Chrome 的已知问题，是否有任何修复/解决方法。

此问题还会影响 Android 4.4 上 Cordova 使用的 ChromeView。 Cordova 在早期版本的 Android(和 iOS)上运行良好。但是，早期版本的 Android 上的 Chrome 仍然会失败。

我有一个使用分层 div 的应用程序，我将其与 CSS 一起使用:

pointer-events: none

这样我就可以滚动或点击下方的 div。

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

在非 ChromeView 浏览器上，下面的 div 是可滚动的。

在 ChromeView 浏览器(Android 4.4 上的 Chrome、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();
});