我有一个页面，其中有一个部分用于绘制绘图。但在移动浏览器上使用时，touchmove 事件（至少是垂直事件）也会滚动页面（这会降低绘图体验）。有没有办法a）禁用和重新启用页面的滚动（这样我可以在每行开始时将其关闭，但在每行完成后将其重新打开），或b）禁用默认处理touchmove 事件（可能是滚动）会转到绘制草图的画布（我不能完全禁用它们，因为草图使用它们）？
我已经在草图中使用了 jquery-mobile vmouse 处理程序，如果这会有所不同的话。
更新：在 iPhone 上，如果我选择要在其中绘制草图的画布，或者在绘制之前只按住手指一会儿，页面不会滚动，这不是因为我在页面中编码。
【问题讨论】：
标签： javascript jquery-mobile touch
将touch-action CSS 属性设置为none，即使与passive event listeners 一起使用：
touch-action: none;
当事件源自那个元素时，将此属性应用于元素不会触发默认（滚动）行为。
【讨论】：
touchstart 事件，所以如果你想识别触摸事件但不允许滚动，那么它就没有用了。
touchstart 触发就好了。
注意：正如@nevf 在 cmets 中指出的那样，此解决方案可能不再有效（至少在 Chrome 中）due to performance changes。建议使用@JohnWeisz 的answer 也建议使用
touch-action。
与@Llepwryd 给出的答案类似，我使用了ontouchstart 和ontouchmove 的组合来防止在某个元素上滚动。
照原样取自我的一个项目：
window.blockMenuHeaderScroll = false;
$(window).on('touchstart', function(e)
{
if ($(e.target).closest('#mobileMenuHeader').length == 1)
{
blockMenuHeaderScroll = true;
}
});
$(window).on('touchend', function()
{
blockMenuHeaderScroll = false;
});
$(window).on('touchmove', function(e)
{
if (blockMenuHeaderScroll)
{
e.preventDefault();
}
});
本质上，我正在做的是监听触摸开始，看看它是否从另一个元素的子元素开始，使用 jQuery .closest 并允许打开/关闭滚动的触摸运动。 e.target 指的是触摸开始的元素。
您想阻止触摸移动事件的默认设置，但是您还需要在触摸事件结束时为此清除标志，否则触摸滚动事件将不起作用。
这可以在没有 jQuery 的情况下完成，但是对于我的使用，我已经有了 jQuery，不需要编写代码来查找元素是否具有特定的父元素。
截至 2013 年 6 月 18 日在 Android 上的 Chrome 和 iPod Touch 中测试
【讨论】：
$(".carousel").on('touchstart', function (e) { e.preventDefault(); }); 这可以防止在我的旋转木马上上下滚动 :)
CSS 上有一个小“hack”，它还允许您禁用滚动：
.lock-screen {
height: 100%;
overflow: hidden;
width: 100%;
position: fixed;
}
将该类添加到正文将阻止滚动。
【讨论】：
touch-action: none; 允许滚动在触摸设备中无法滚动时工作；当scrollbar-width 为空时，它是实用的。
document.addEventListener('touchstart', function(e) {e.preventDefault()}, false);
document.addEventListener('touchmove', function(e) {e.preventDefault()}, false);
这应该会阻止滚动，但它也会破坏其他触摸事件，除非您定义自定义方式来处理它们。
【讨论】：
{passive: false}document.addEventListener('touchstart', handleEndEventFn, { passive: false });
touchmove 而不是将事件监听器绑定到文档，而是将它直接绑定到 canvas 元素有助于防止在使用画布时滚动，但允许 touchstart 工作，因为我没有不要阻止它。
document.removeEventListener('touchmove', handleFn)，但它不起作用。
最终的解决方案是在document.documentElement 上设置overflow: hidden;，如下所示：
/* element is an HTML element You want catch the touch */
element.addEventListener('touchstart', function(e) {
document.documentElement.style.overflow = 'hidden';
});
document.addEventListener('touchend', function(e) {
document.documentElement.style.overflow = 'auto';
});
通过在触摸开始时设置overflow: hidden，它会使超出窗口的所有内容都隐藏起来，从而无法滚动任何内容（没有内容可以滚动）。
在touchend 之后，可以通过将overflow 设置为auto（默认值）来释放锁。
最好将它附加到<html>，因为<body> 可以用来做一些造型，而且它可以让孩子们表现出意外。
编辑：
关于touch-action: none; - Safari 不支持它according to MDN。
【讨论】：
令我惊讶的是，“preventDefault()”方法在 iOS 13.7 上的最新 Google Chrome（版本 85）上为我工作。它也适用于同一设备上的 Safari，也适用于我的 Android 8.0 平板电脑。 我目前在我的网站上为 2D 视图实现了它： https://papercraft-maker.com
【讨论】：
尝试在触摸事件发生时将溢出隐藏在您不想滚动的内容上。例如，在开始时将溢出设置为隐藏，并在结束时将其设置回自动。
你试过了吗？我很想知道这是否可行。
document.addEventListener('ontouchstart', function(e) {
document.body.style.overflow = "hidden";
}, false);
document.addEventListener('ontouchmove', function(e) {
document.body.style.overflow = "auto";
}, false);
【讨论】：
我发现ev.stopPropagation(); 为我工作。
【讨论】：