Touchmove 指针事件：无 CSS 在 Chrome for Android 4.4 / ChromeView 上不起作用答案

【问题标题】：Touchmove pointer-events: none CSS doesn't work on Chrome for Android 4.4 / ChromeViewTouchmove 指针事件：无 CSS 在 Chrome for Android 4.4 / ChromeView 上不起作用
【发布时间】：2023-03-18 21:30:02
【问题描述】：

我正在使用 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 浏览器（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 上的 Cordova 应用和 Chrome 本身（适用于早期版本的 Android）上失败。

我尝试在顶部 div 和底部 div 之间重新调度 touchmove 事件，但这似乎也不起作用。如果我重新调度单击/滚动事件，那很好，只是不要触摸移动。

【问题讨论】：

你有没有设法解决这个问题？我想我遇到了与所描述的问题类似的问题。
@OliverBenns 不。最后，我将叠加层切成小块，这样下面的 div 就有效地位于顶部。

标签： css html cordova google-chrome

【解决方案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();
});

【讨论】：

我用我的测试示例尝试了这个，但不幸的是它不起作用，至少对于滚动。 pmdx.me/scroll-notfixed.html
当。这对我来说是通过滑动和点击，但你是对的。不是正常的滚动。对不起。
在任何情况下都感谢您的回答 - 希望它对其他人有用。
为我工作（虽然我不关心滚动）

【解决方案2】：

显然有一个单独的 CSS 属性叫做touch-action：

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

添加touch-action: none;，它应该可以工作。

【讨论】：