Scroll事件不能取消冒泡问题

mdn上写了,scroll事件冒泡并不能被取消:https://developer.mozilla.org/en-US/docs/Web/API/Document/scroll_event

我当前遇到一个业务就是,在h5页面内,整个页面需要支持上下滑(touchstart/touchmove/touchend,changePage())切换页面,又要支持页面内某个区域内(scrollRegion)可以滚动(scroll)查看list。

一旦scroll,一定会被冒泡到touchstart/touchmove/touchend,然后执行changePage的操作。

我当前的解决办法是,在父组件监听touchstart/touchmove/touchend事件,一旦e.target在指定的scrollRegion中时,就不执行changePage操作,只执行默认的scroll操作。

那如何判断e.target在指定的scrollRegion中呢,我只想到了一个比较笨的办法,就是给scrollRegion中的所有标签的第一个class的name加上了相同的前缀 'xxx-',我只要判断e.target

的第一个calssname是否有此前缀即可。

e.target.classList[0].split('-')[0] === 'xxx';

感觉这样做代码很脏,可是想不到更好的办法,如果小伙伴有更好的阻止scroll冒泡的方法,可以评论或者私信,谢谢。

猜你喜欢

转载自www.cnblogs.com/catherinezyr/p/11374456.html