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

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

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

By default, the Pixi canvas/display-area cannot be used to scroll the webpage that contains it. Which is important on touch screens. (eg. If you use the rest of the web-page to pinch-zoom into the Pixi canvas, you can become trapped and unable to zoom back out (or pan away), because there's no non-Pixi-canvas area of the page to "grab" with your pinch gesture).

To enable this functionality, I use autoPreventDefault. But this comes with some undesirable side-effects, like scroll/pinch-zoom actions over the canvas registering "taps" or clicks in a way that doesn't make sense. (ie. I'm attempting to zoom or scroll the outer page at that point, not interact with the Pixi canvas)

To work around that, I modify and compile my own custom version of Pixi where I can apply preventDefault in a more granular way...

To get page-scrolling functionality it seems I only need to preventDefault in the InteractionManager.prototype.onTouchEnd function. Whereas autoPreventDefault will also preventDefault on 3 other events. (onMouseDown, onTouchMove, onTouchStart).

Leaving autoPreventDefault = false and applying preventDefault only to onTouchEnd, gives me the functionality I need. But it'd be nice to not have to customize and rebuild Pixi in this way every release. (Sorry if there's something else I'm missing here; I don't completely understand the event system in Pixi, or what else to do about this scroll-touch problem)

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

这在 IOS 设备上完美运行，但在 Android 上不适用，唯一的异常(exception)是使用 Adblock 浏览器的三星 A7(在 Chrome 上失败)。

非常感谢您对此的帮助。

TLDR:

在 onTouchStart 和 onMouseMove 上禁用 PIXI 的 e.preventDefault 可在 IOS 设备上使用，并允许我通过拖动 Canvas 来滚动页面，但不适用于 Android 设备。

---

Best Answer-推荐答案

我的解决方案是使用

renderer.plugins.interaction.autoPreventDefault = false

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

Should the manager automatically prevent default browser actions.

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

关于javascript - PIXI - 禁用 preventDefault 触摸事件在 Android 设备上不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37527524/