javascript - PIXI - 禁用 preventDefault 触摸事件在 Android 设备上不起作用
<p><p>由于我正在做一个项目，我需要能够在 Canvas 周围拖动对象，还需要通过拖动 PIXI Sprites 后面的实际 Canvas “背景”来滚动整个页面，我遵循了这个人的发现这里:</p>
<p> <a href="https://github.com/pixijs/pixi.js/issues/2483" rel="noreferrer noopener nofollow">https://github.com/pixijs/pixi.js/issues/2483</a> :</p>
<blockquote>
<p>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).</p>
<p>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)</p>
<p>To work around that, I modify and compile my own custom version of
Pixi where I can apply preventDefault in a more granular way...</p>
<p>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).</p>
<p>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)</p>
</blockquote>
<p>所以我在“onTouchStart”和“onMouseMove”上禁用了 e.preventDefault()，但在“onTouchEnd”上保持原样</p>
<p>这在 IOS 设备上完美运行，但在 Android 上不适用，唯一的异常(exception)是使用 Adblock 浏览器的三星 A7(在 Chrome 上失败)。</p>
<p>非常感谢您对此的帮助。</p>
<p>TLDR:</p>
<p>在 onTouchStart 和 onMouseMove 上禁用 PIXI 的 e.preventDefault 可在 IOS 设备上使用，并允许我通过拖动 Canvas 来滚动页面，但不适用于 Android 设备。</p></p>
<br><hr><h1><strong>Best Answer-推荐答案</ strong></h1><br>
<p><p>我的解决方案是使用</p>
<pre><code>renderer.plugins.interaction.autoPreventDefault = false
</code></pre>
<p>这应该适用于 iOS 和 Android。
autoPreventDefault 的文档如下:</p>
<blockquote>
<p>Should the manager automatically prevent default browser actions.</p>
</blockquote>
<p>使用 PIXI 4.5.6。
看看文档:
<a href="http://pixijs.download/dev/docs/PIXI.CanvasRenderer.html#plugins" rel="noreferrer noopener nofollow">http://pixijs.download/dev/docs/PIXI.CanvasRenderer.html#plugins</a>
<a href="http://pixijs.download/dev/docs/PIXI.interaction.InteractionManager.html" rel="noreferrer noopener nofollow">http://pixijs.download/dev/docs/PIXI.interaction.InteractionManager.html</a> </p></p>
<p style="font-size: 20px;">关于javascript - PIXI - 禁用 preventDefault 触摸事件在 Android 设备上不起作用，我们在Stack Overflow上找到一个类似的问题：
<a href="https://stackoverflow.com/questions/37527524/" rel="noreferrer noopener nofollow" style="color: red;">
https://stackoverflow.com/questions/37527524/
</a>
</p>
页:
[1]