swiper、better-scroll滑动时阻止默认事件冒泡

蔚落 2022-01-31 13:11 999阅读 0赞

不管是swiper还是better-scroll在滑动的时候会阻止touchmove的默认事件

> 1.  阻止浏览器的滚动条
> 2.  阻止用户的双指缩放

touchstart默认事件有

> 1.  解决ios10+及部分安卓通过设置viewport禁止用户缩放的功能（双指滑动、双击）.
> 2.  解决事件点透问题
> 3.  阻止图片文字被选中
> 4.  阻止长按元素会弹出系统菜单
> 5.  阻止浏览器回弹的效果
> 6.  阻止浏览器的滚动条
> 7.  阻止鼠标的事件
> 8.  阻止input框的输入功能

swiper中滑动时取消默认事件 和 事件冒泡

onDragStart(e) {
        const swiper = this;
        const params = swiper.params.scrollbar;
        const { scrollbar, $wrapperEl } = swiper;
        const { $el, $dragEl } = scrollbar;
        swiper.scrollbar.isTouched = true;
        e.preventDefault();
        e.stopPropagation();
    
        $wrapperEl.transition(100);
        $dragEl.transition(100);
        scrollbar.setDragPosition(e);
    
        clearTimeout(swiper.scrollbar.dragTimeout);
    
        $el.transition(0);
        if (params.hide) {
          $el.css('opacity', 1);
        }
        swiper.emit('scrollbarDragStart', e);
      },
      onDragMove(e) {
        const swiper = this;
        const { scrollbar, $wrapperEl } = swiper;
        const { $el, $dragEl } = scrollbar;
    
        if (!swiper.scrollbar.isTouched) return;
        if (e.preventDefault) e.preventDefault();
        else e.returnValue = false;
        scrollbar.setDragPosition(e);
        $wrapperEl.transition(0);
        $el.transition(0);
        $dragEl.transition(0);
        swiper.emit('scrollbarDragMove', e);
      },
      onDragEnd(e) {
        const swiper = this;
    
        const params = swiper.params.scrollbar;
        const { scrollbar } = swiper;
        const { $el } = scrollbar;
    
        if (!swiper.scrollbar.isTouched) return;
        swiper.scrollbar.isTouched = false;
        if (params.hide) {
          clearTimeout(swiper.scrollbar.dragTimeout);
          swiper.scrollbar.dragTimeout = Utils.nextTick(() => {
            $el.css('opacity', 0);
            $el.transition(400);
          }, 1000);
        }
        swiper.emit('scrollbarDragEnd', e);
        if (params.snapOnRelease) {
          swiper.slideToClosest();
        }
      },

而better-scroll中默认会取消默认事件，事件可以冒泡，都可配置  
![在这里插入图片描述][20190516181120437.png]  
![在这里插入图片描述][20190516181139628.png]  
另外还要注意：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3poYW9oYW5xcQ_size_16_color_FFFFFF_t_70]

[20190516181120437.png]: /images/20220131/612f499f909048e8af6d778f7ff72369.png
[20190516181139628.png]: /images/20220131/8400bf80fd894e2ab5347e605acd510a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3poYW9oYW5xcQ_size_16_color_FFFFFF_t_70]: /images/20220131/7ac855586e0b411391925499e2b131bf.png