Mouseup 事件在 Swiper 中不起作用答案

【问题标题】：Mouseup events are not working inside SwiperMouseup 事件在 Swiper 中不起作用
【发布时间】：2018-06-05 01:34:14
【问题描述】：

我正在使用 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>

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

我该怎么做？

【问题讨论】：

标签： javascript swiper

【解决方案1】：

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

【讨论】：

谢谢！就我而言，我需要在每个滑动幻灯片中都有一个可拖动/可排序的列表。但是 swiper 父级阻止了子级的任何 mousedown/drag 事件（假设它与 swiper 自己的拖动/滑动事件有关）。

【解决方案2】：

更新 Swiper 并在 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>

【讨论】：

【解决方案3】：

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>

【讨论】：