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

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

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

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

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

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

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 2

更新刷卡器并在刷卡器选项中添加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 3

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

Mouseup 事件在 Swiper 中不起作用

Mouseup events are not working inside Swiper

javascript

swiper