编辑说明：
我想要的是：
全屏Javascript画布可以处理触摸事件，而无需浏览器进一步解释这些事件，但还保留在用户操作时打开新窗口的功能。
例子：
要点：
我需要实时准确地解释这些事件，以便在画布中响应这些动作。（我正在通过进行实时绘制requestAnimationFrame，允许我在不使用DOM的情况下对用户事件做出反应）
目前的状况：
这一切都完美的作品（除了打开一个新窗口的能力）是因为我的位置，画布是视口的全尺寸（处理任何窗口大小调整事件），并在画布听ontouchstart，ontouchmove，ontouchend，等等事件，evt.preventDefault()我自己处理完用户输入后调用。这样可以确保画布始终处于全屏状态，不会让步，并且可以准确地向用户提供用户输入以处理游戏中的内容。
问题：
我需要处理的一点用户输入是当他们使用“启动我的网页”按钮单击画布区域时启动网页。但是，这window.open(mywebpage)是行不通的，因为移动浏览器只允许在click事件的调用堆栈中执行此类操作。因为我依赖于ontouchstart获取响应性控件，并且evt.preventDefault()在某个ontouchstart事件中取消了click事件的发生，所以我无法启动网页（该网页被浏览器阻止了）。
我尝试的解决方案及其不足的原因：
div（或a）标记，并向其添加click事件：如果用户在此标记内单击并拖动，则它允许页面滚动和缩放。尝试解决此问题将导致与以前相同的问题。原始帖子：
我有一个全屏画布移动应用程序，该应用程序在位置上锁定了自己（无法滚动或缩放），这样我就可以正确地解释用户输入，而不会受到干扰（滑动，平移等）。
它通过拦截touchstart事件和调用来锁定自身evt.preventDefault（以及据我所知实际上不执行任何操作的meta视口无缩放内容）。
这很好用，并且是制作游戏（或类似游戏的应用程序）功能所必需的。
问题是我还有一个“转到该网页”按钮。我可以拦截touchstart，并使用window.open(somewebpage)，但移动弹出窗口阻止程序将阻止它。“规则”似乎是“如果在用户交互的调用堆栈中完成网页，并且该交互是'点击'事件，则将允许打开该网页”。
我将第一部分放下，但是如果将事件更改为click事件，则网页现在会将滑动解释为滚动（将捏解释为缩放等）。如果我同时拥有click和touchstart事件，然后调用evt.preventDefault()上touchstart（其停止滚动/缩放）也停止了click活动。
如果我div将“启动网页”按钮的点击区域放在顶部，那么当玩家在该按钮上输入内容时，播放器便可以滚动/缩放，这会带来不可预知且难以把握的体验。
如何在不滚动当前网页的情况下启动另一个网页？
编辑：根据要求，这是一个代码段，至少部分说明了我正在尝试做的事情https://jsfiddle.net/phildo/0q8e47fk/10/。请注意，在“真实”情况下，画布占据了屏幕的整个宽度/高度，并在屏幕调整大小时进行了相应的显式设置。
在不依赖于制造商的整个移动设备中，防止在移动网页上发生任何形式的反弹都是一个巨大的问题。几年前，我在Windows Phone 8应用程序上遇到过类似的问题，并且（非常令人惊讶）那里是专用于Windows环境的解决方案，当然不能在此处应用。
对于iOS，您需要iOS解决方案，对吗？
该解决方案的名称为iNoBounce。想法是将小的js库添加到您的html页面中，使用一些良好的约定进行编码，而jslib将在必要时进行防止默认设置的肮脏工作。
实际上，它的诀窍不是仅防止任何事情，而是仅防止那些“额外的”事情，并且会引起反弹事件。
用iNoBounceGitHub Readme的话：
iNoBounce-webkit-overflow-scrolling通过检查Fresh属性来检测浏览器是否支持CSSStyleDeclaration。如果是的话，iNoBounce会听touchmove，并有选择地preventDefault()对move不上一个元素的子发生的事件-webkit-overflow-scrolling: touch集。此外，iNoBounce将preventDefault()当用户attemping到滚动过去的边界scrollable元件，从而防止元件本身（不可避免的警告）上橡皮。
示例代码要求您使用以下部分（画布有单独的示例代码，这只是最常见的解决方案）：
// All you need is an element with `height` or `max-height`, `overflow: auto` and `-webkit-overflow-scrolling: touch`.
<script src="inobounce.js"></script>
<style>
ul {
height: 115px;
border: 1px solid gray;
overflow: auto;
-webkit-overflow-scrolling: touch;
}
</style>
资源：
[1] https://github.com/lazd/iNoBounce
编辑：
我发现您并不仅限于iOS。对于其他浏览器，请尝试
[2] https://developer.mozilla.org/zh-CN/docs/Web/CSS/overscroll-behavior
其中介绍了overscroll-behavior设置，您可以将其设置none为禁用跳动。
它仅适用于Android，不适用于iOS或iOS。
对于移动Windows Phone，我有以下解决方案：
div.wp8ScrollFix {
-ms-touch-action: none;
}
实际上，它与iNoBounce的功能相同，但对于包含画布的div来说只有一条CSS行。
编辑2：
对于半通用解决方案的搜索，我可以找到
-touch-action: none;
如果将其应用于包含画布的div元素，则可以禁用默认的触摸事件，并为画布定义自己的事件。
该解决方案可在Safari浏览器以外的任何其他软件上运行。如[3]中所示，可能会有一些变体，例如
-ms-touch-action: none;
但我想现在它们都一样了，没有前缀。[3]解决方案非常古老，从那时起世界已经发生了很大变化。
可悲的是，浏览器支持至少在2019年是相同的[4]，也许现在也是如此。
资料来源：
[3] WP8（Lumia 920）设备的jQuery / HTML5 / gwt应用程序：垂直CSS滚动修复
[4] https://css-tricks.com/almanac/properties/t/touch-action/
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句