第一句子网 - 唯美句子、句子迷、好句子大全
第一句子网 > html让屏幕可以上下拉动 如何在vue中开启 禁止H5页面的上下拉动

html让屏幕可以上下拉动 如何在vue中开启 禁止H5页面的上下拉动

时间:2024-01-04 04:59:53

相关推荐

html让屏幕可以上下拉动 如何在vue中开启 禁止H5页面的上下拉动

最近接到项目经理的一个需求,要求将h5页面生成图片,用户点击在屏幕的时候能够将图片保存到本地,所以就很机智的用了html2canvas这个插件。自以为很完美的实现了这个功能,结果测试小哥在页面加载的时候上下拉动了一下页面,绘制出来的图片面目全非。立马去百度了一下,原来html2canvas在获取到dom元素之后才开始渲染。因此在页面开始加载时候,禁止页面的上下拉动便可以让html2canvas安安静静的绘图了。好了,开始踩坑吧。。。

阻止H5页面的上下拉动

document.body.addEventListener( ouchmove,

e.preventDefault(); //阻止默认的处理方式(阻止下拉滑动的效果)

,{passive: false}//当 passive: true,浏览器忽略 preventDefault()。

);

开启H5页面的上下拉动

好了,既然禁止是这段代码,那么开启上拉动自然就是

document.body.removeEventListener( ouchmove,

e.preventDefault(); //阻止默认的处理方式(阻止下拉滑动的效果)

,{passive: false}//当 passive: true,浏览器忽略 preventDefault()。

);

结果页面在加载的时候的确可以禁止上下拉动,But在页面加载之后,页面就再也不能上下拉动了。。。

为什么会出现这种情况呢?

如果要移除事件句柄,addEventListener()的执行函数必须使用外部函数,如上实例所示 (myFunction)。匿名函数,

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。