如何防止触摸屏滚动输入元素

Question

我在一个可滚动的文档主体上有一个模态，当我用手指在模态上平移时，我想防止文档主体滚动。

$(document).on('touchstart touchmove', function(e){ e.preventDefault(); });

这段代码适用于除输入元素之外的所有元素。

<div id="modal">
  <p>Lorem ipsum</p>
  <input type="text"/>
</div>

如果我在输入元素内平移手指，文档将继续滚动。为什么会发生这种情况?

Answer 1

我猜，它正在冒泡。将e.stopPropagation()添加到函数体

$(document).on('touchstart touchmove', function(e){
    e.stopPropagation();
    e.preventDefault(); 
});