老师,请教下开发中遇到的问题
问题描述：
// 阻止浏览器默认行为
const preventDefaultEvent = e => {
e.preventDefault()
console.log(1);
}
// touch
document.addEventListener('touchstart', preventDefaultEvent, false)
// // pointer
// document.addEventListener('pointerdown', preventDefaultEvent, false)
// // mouse
// document.addEventListener('mousedown', preventDefaultEvent, false)
用touch实现阻止浏览器默认行为时,
在移动端进行操作时就会出现报错,
在css里面添加touch-action属性 或者改成pointer就正常了
相关截图：
问题描述：
另外,用手机访问目的地页时,
有时候拉菜单里的滚动条会拉不到,反而是拉动了整个页面
用pc端的模拟器就不存在这种情况
是不是跟浏览器的下拉刷新机制有关
谢谢老师解答下
相关截图：
正在回答
同学你好，关于同学的问题解答如下：
1、用touch实现阻止浏览器默认行为时，在移动端进行操作时就会出现报错，在css里面添加touch-action属性或者改成pointer就正常了
①首先，报错是谷歌浏览器监听touch类事件报错，报错信息说的是无法被动监听preventDefault事件。这个是新版本chrome浏览器的报错
②原因是谷歌公司为了最快速的响应touch事件而做出的改变，在以前，当浏览器对默认的事件进行响应的时候，要检查一下是否进行了默认事件的取消。这样就在响应滑动操作之前会耽误一点时间。因此，谷歌公司就决定默认取消了对这个事件的检查，默认事件也就取消了，直接执行滑动操作，这样滑动效果就更加顺畅了。但是浏览器的控制台就会进行错误提醒。
③解决办法是结合css属性touch-action:none让任何触摸事件都不产生默认行为（当然touch-action还有很多其他的属性，这里不做深入探讨）。
④因为是对touch事件所作出的更改，因此换成pointer是不受影响的
2、有时候拉菜单里的滚动条会拉不到,反而是拉动了整个页面
这是手机端的浏览器内置的机制，不是代码的问题，所以在pc端的模拟器上是无法复现的
希望可以帮到你，祝学习愉快！
-
同学你好，关于同学的问题解答如下：
首先，当设置overflow为scroll或者不设置overflow，默认是auto时，实际上是浏览器原生实现的滚动效果。所有的滚动都是在Document上形成了一个队列，然后按照一定的规则触发，当滚动鼠标滚轮或者滑动手机屏幕时，触发对象可分为两种类型。
①viewport被触发滚动， eventtarget为关联的Document。
②element元素被触发滚动，通常也就是添加overflow滚动属性的element元素（默认是body元素），而此时eventtarget为相应的node element。
当触发滚轮或滑动时，如果当前元素没有设置overflow这样的属性，同时也没有设置preventDefault禁掉原生的滚动/滑动事件，那么此时触发的是 viewport的滚动，既然它触发了整个viewport的滚动，那么给body上加个overflow:hidden，让整个body变成不可滚动的元素即可解决这个问题。
但是，当body的高度被内容撑开而滚动时，如果不对body的高度加以限制，只加入overflow:hidden，此时在移动端依然可以滚动。所以一般还需要设置html,body{height:100%}。
希望可以帮到你，祝学习愉快！
2021-08-17 09:48:10
相似问题
登录后可查看更多问答，登录/注册
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星