Mouseup 事件在 Swiper 中不起作用

Question

我正在使用 Swiper 来显示一些幻灯片，并且我有一些在mouseup上运行的事件，但它们不适用于 Swiper。 当我单击 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 选项中添加touchStartPreventDefault: false

 document.body.addEventListener('mouseup', () => { alert('mouseup'); }); const swiper = new Swiper('.swiper-container', { direction: 'horizontal', touchStartPreventDefault: false, pagination: { el: '.swiper-pagination', }, });

 .swiper-container { width: 80vw; height: 80vh; } html, body { width: 100%; height: 100%; } #m { height: 400px; }

 <link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css"> <script src="https://unpkg.com/swiper/swiper-bundle.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 2

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

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

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

有了它，它将不再锁定mouseup事件。

以下示例显示了一个带有alert的事件，它可以工作，但会导致刷卡出现 ux 问题。

 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; }

 <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 3

对我来说，只需在touchStartPreventDefault: false选项上添加这个touchStartPreventDefault: false就解决了我的“mousedown”和“mouseup”问题。