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

I'm using CSS pointer-events to pass touchmove events through a transparent div. This works everywhere apart from Chrome on Android. I'm wondering if this is a known issue with Chrome and if there's any fixes / workarounds.

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

This issue also affects ChromeView, used by Cordova on Android 4.4. Cordova on earlier versions of Android (and iOS) works fine. However, Chrome on earlier versions of Android will still fail.

此问题还会影响Cordova在Android 4.4上使用的ChromeView。早期版本的Android（和iOS）上的Cordova工作正常。但是，早期版本的Android上的Chrome仍会失败。

I have an app that uses layered divs, which I use with CSS:

我有一个使用分层div的应用程序，我使用CSS：

pointer-events: none

so I can scroll or click the lower div.

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

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

On non-ChromeView browsers, the underneath div is scrollable.

在非ChromeView浏览器上，底部的div是可滚动的。

On ChromeView browsers (Chrome, Cordova on Android 4.4), the underneath div isn't scrollable. This is what I need to solve.

在ChromeView浏览器（Chrome，Android 4.4上的Cordova）上，下面的div不可滚动。这是我需要解决的问题。

There's an example of this here:

这里有一个例子：

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

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

Note the lower div is scrollable, made possible by 'pointer-events: none'.

注意，下面的div是可滚动的，可以通过'pointer-events：none'实现。

It works fine on most devices (iOS 6-7, Android 4.1-4.2, Chrome Windows/Mac), but fails on my Cordova app on Android 4.4 and Chrome itself (for earlier versions of Android).

它适用于大多数设备（iOS 6-7，Android 4.1-4.2，Chrome Windows / Mac），但在Android 4.4和Chrome本身的Cordova应用程序（早期版本的Android）上失败。

I've tried re-dispatching touchmove events between the top div and bottom div, but that doesn't seem to work either. If I re-dispatch click/scroll events it's fine, just not touchmove.

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

2 个解决方案

#1

I solved this using the solution here: https://*.com/a/20387287/1876899

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

Thank you very much user wulftone! Somehow preventing the default touchStart event on my overlay allowed the interaction to pass through and trigger the events below.

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

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

or in my case, with jQuery:

或者在我的情况下，使用jQuery：

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

#2

Apparently there is a separate CSS property called touch-action:

显然，有一个名为touch-action的独立CSS属性：

https://developer.mozilla.org/en-US/docs/Web/CSS/touch-action

Add touch-action: none; and it should work.

添加触摸动作：无;它应该工作。

#1