JS禁止手机端全局触摸并允许局部触摸

技能 · 2021-06-20 · 380 人浏览
JS禁止手机端全局触摸并允许局部触摸
在开发移动网页端的时候,总会遇到手机浏览器适配混乱,滚动条屡禁不止,以下提出一种解决方案——通过禁用全局触摸并允许局部触摸达到禁止效果。

第一步:如果使用Vue开发,可以在Public/index.html入口处添加该代码,如果未使用框架,可单独创建Config文件进行全局引入。

document.body.addEventListener('touchmove', function(e){
    e.preventDefault();
}, { passive: false });

第二步:允许局部块触摸(使用ID获取的节点是一维数组。使用ClassName获取的节点是二维数组)

var div = document.getElementsByClassName("divclassname");
div = div[0];
div.ontouchmove = function (ev) {
    ev.stopPropagation();
};

注:有个小Bug,在IOS系统下,触摸局部有几率会让地址栏收回导致布局出现变动,并导致全局滚动条出现,做好UI的适配可解决布局变动,但IOS下的滚动条目前还没想出什么好办法可以完美解决。

JavaScript JS VueJs 移动端适配 滚动条 布局
Theme Jasmine by Kent Liao