PIXI - 禁用 preventDefault 触摸事件在 Android 设备上不起作用答案

【问题标题】：PIXI - disabled preventDefault touch events not working on Android devicesPIXI - 禁用 preventDefault 触摸事件在 Android 设备上不起作用
【发布时间】：2016-05-30 13:58:06
【问题描述】：

由于我正在从事一个项目，我需要能够在画布周围拖动对象，还需要通过拖动 PIXI Sprites 后面的实际画布“背景”来滚动整个页面，因此我遵循了这个人的发现这里：

https://github.com/pixijs/pixi.js/issues/2483：

默认情况下，Pixi 画布/显示区域不能用于滚动包含它的网页。这在触摸屏上很重要。（例如。如果您使用网页的其余部分来捏拉放大 Pixi 画布，您可能会被困住并且无法缩小（或平移），因为页面没有非 Pixi 画布区域可以“抓取” 你的捏手势）。

要启用此功能，我使用 autoPreventDefault。但这来了有一些不良副作用，如滚动/捏拉缩放动作在画布上注册“点击”或以一种不存在的方式点击有道理。（即。我正在尝试缩放或滚动外页那一点，不与 Pixi 画布交互）

为了解决这个问题，我修改并编译了我自己的自定义版本 Pixi，我可以在其中以更精细的方式应用 preventDefault...

要获得页面滚动功能，我似乎只需要 InteractionManager.prototype.onTouchEnd 中的 preventDefault 功能。而 autoPreventDefault 也将 preventDefault on 3 其他事件。（onMouseDown、onTouchMove、onTouchStart）。

保留 autoPreventDefault = false 并仅将 preventDefault 应用于 onTouchEnd，给了我我需要的功能。但最好不要每次发布都必须以这种方式自定义和重建 Pixi。（对不起如果我在这里还缺少其他东西；我不完全了解 Pixi 中的事件系统，或者对此如何处理滚动触摸问题）

所以我在“onTouchStart”和“onMouseMove”上禁用了 e.preventDefault()，但在“onTouchEnd”上保持原样

这适用于 IOS 设备，但不适用于 Android，唯一的例外是使用 Adblock 浏览器的三星 A7（在 Chrome 上失败）。

非常感谢您对此的帮助。

TLDR：

在 onTouchStart 和 onMouseMove 上禁用 PIXI 的 e.preventDefault 可在 IOS 设备上运行，并允许我通过拖动画布来滚动页面，但在 Android 设备上则不行。

【问题讨论】：

标签： javascript android ios canvas mobile

【解决方案1】：

我的解决方案是使用

renderer.plugins.interaction.autoPreventDefault = false

这应该适用于 iOS 和 Android。 autoPreventDefault 的文档如下：

管理器是否应该自动阻止默认浏览器操作。

使用 PIXI 4.5.6。看看文档： http://pixijs.download/dev/docs/PIXI.CanvasRenderer.html#plugins http://pixijs.download/dev/docs/PIXI.interaction.InteractionManager.html

【讨论】：

【解决方案2】：

使用renderer.plugins.interaction.autoPreventDefault=true 应该可以解决问题。

【讨论】：