Mouseup 事件在 Swiper 中不起作用

Question

我正在使用 Swiper 来显示一些幻灯片，并且我有一些在 上运行的事件mouseup，但它们不能与 Swiper 一起使用。当我单击滑动器容器时，什么也没有发生。

您可以在这个示例中看到，警报不起作用：

document.body.addEventListener('mouseup', () => { alert('mouseup'); });

const swiper = new Swiper('.swiper-container', {
  direction: 'horizontal',
  pagination: {
    el: '.swiper-pagination',
  },
});

.swiper-container {
  width: 80vw;
  height: 80vh;
}

html, body {
width: 100%;
  height: 100%;
}

#m {
  height: 400px;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.3.2/css/swiper.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.3.2/js/swiper.min.js"></script>

<div id="m">
<div class="swiper-container">
    <!-- Additional required wrapper -->
    <div class="swiper-wrapper">
        <!-- Slides -->
        <div class="swiper-slide">Slide 1</div>
        <div class="swiper-slide">Slide 2</div>
        <div class="swiper-slide">Slide 3</div>
        ...
    </div>
    <!-- If we need pagination -->
    <div class="swiper-pagination"></div>

    <!-- If we need navigation buttons -->
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>

    <!-- If we need scrollbar -->
    <div class="swiper-scrollbar"></div>
</div>
</div>

我认为这样做是为了避免事件干扰滑动，但如果用户不滑动，只是单击，我想触发我的事件。

我怎样才能做到这一点？

Answer 1

touchStartPreventDefault: false对我来说，只需在 Swiper 选项上添加此选项即可解决我的“mousedown”和“mouseup”问题。

Answer 2

Swiper 故意这样做是为了避免事件扰乱滑动。改变这种行为的一种方法是欺骗它认为您的元素是表单元素。它在内部进行检查，如果目标是表单元素，则允许单击。

您可以更改Swipersinit函数来设置表单元素数据：

const i = Swiper.prototype.init;
Swiper.prototype.init = function () {
  this.touchEventsData.formElements = '*';
  i.call(this);
};

这样它将不再锁定mouseup事件。

以下示例显示了一个带有 的事件alert，它可以工作，但会导致滑动时出现用户体验问题。

const i = Swiper.prototype.init;
Swiper.prototype.init = function () {
  this.touchEventsData.formElements = '*';
  i.call(this);
};

document.body.addEventListener('mouseup', () => { alert('mouseup'); });

const i = Swiper.prototype.init;
Swiper.prototype.init = function () {
  this.touchEventsData.formElements = '*';
  i.call(this);
};

const swiper = new Swiper('.swiper-container', {
  direction: 'horizontal',
  pagination: {
    el: '.swiper-pagination',
  },
});

.swiper-container {
  width: 80vw;
  height: 80vh;
}

html, body {
width: 100%;
  height: 100%;
}

#m {
  height: 400px;
}