Scroll事件不能取消冒泡问题

Posted 2022-08-02 catherinezyr

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冒泡的方法，可以评论或者私信，谢谢。