javascript - 如何使用 javascript 或 jQuery 在 Microsoft Edge 中禁用 "swipe to go back"？

Question

我目前正在开发一个具有对象水平旋转功能的网站。假设您看到的第一张图片是物体的正面，第二张是侧面，第三张是背面，第四张是另一侧，第五张是正面。

在我的例子中，我总共有一个物体的 24 张图像，这意味着每张图片之间存在 15 度的 Angular 差异。现在我正在努力让旋转更顺畅。如果我使用鼠标，它在任何浏览器上都能完美运行。但是，如果我使用触摸屏代替 Microsoft Edge 等浏览器，事情就会开始出错。

Edge 的问题是，如果我尝试向右滑动对象，它会以某种方式触发 Edge 中的“返回上一页”功能。当我使用 Chrome 时，我可以使用简单的 javascript 代码来解决这个问题。代码如下所示:

        $(".reel-holder").bind('touchstart', function(event) {
                event.preventDefault();
                event.stopPropagation();
        });

在Edge上滑动的另一个问题是，旋转是按图片旋转的。无论我如何在触摸屏上滑动，它都只会转到下一张/上一张图片。

如何使用 Javascript/JQuery 解决这个问题？

这是鸡蛋

Answer 1

这可以通过 touch-action 来实现CSS 属性。对于您希望阻止 Edge 处理其手势的每个元素，将 touch-action 设置为 none。或者，您可以在共同祖先上将 touch-action 设置为 none，或者，如果您想阻止 Edge 处理任何手势，请将其设置在 body 上。

如果你只想阻止Edge通过滑动返回上一页，但希望Edge处理其他手势，你可以将touch-action设置为pan-right pan -y 捏缩放。

例子:

.reel-holder {
    touch-action: none;
}