鼠标悬停事件在Swiper内部无效

Question

我使用Swiper来显示一些幻灯片，我有一些在mouseup上运行的事件，但他们没有使用Swiper。当我点击swiper容器时没有任何反应。

您可以在此示例中看到，警报无效：

＆＃13;

＆＃13;

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

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

＆＃13;

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

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

#m {
  height: 400px;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

我认为它是为了避免事件干扰滑动，但如果用户没有刷卡，只需点击，我就想触发我的活动。

我该怎么做？

Answer 1

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

您可以更改Swiper s init功能以设置表单元素数据：

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

通过它，它将不再锁定mouseup个事件。

以下示例显示了一个alert的事件，它可以正常工作，但会导致滑动时出现ux问题。

＆＃13;

＆＃13;

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',
  },
});

＆＃13;

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

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

#m {
  height: 400px;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

更新刷卡器并在刷卡器选项中添加a <- runif(2) b <- runif(2) cor(a, b)

touchStartPreventDefault: true

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

Answer 3

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