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

不管是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中默认会取消默认事件，事件可以冒泡，都可配置


另外还要注意：