Mouseup事件在Swiper内部不起作用
Mouseup事件在Swiper内部不起作用
提问于 2018-06-05 01:34:14
我正在使用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>
我认为这样做是为了避免事件干扰滑动，但如果用户不滑动，只是点击，我想触发我的事件。
我怎么能这么做？
回答 3
Stack Overflow用户
回答已采纳
发布于 2018-06-05 01:34:14
斯威珀故意这样做，以避免事件弄糟的滑动。改变这种行为的一种方法是欺骗它，使它认为您的元素是表单元素。在内部，它进行检查，如果目标是表单元素，则允许单击。
您可以更改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>
Stack Overflow用户
发布于 2020-11-25 00:47:26
更新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>
Stack Overflow用户
发布于 2021-02-17 12:56:36
对我来说，仅仅是在Swiper选项上添加这个touchStartPreventDefault: false就解决了我的"mousedown“和"mouseup”的问题。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/50690843
复制相关文章
相似问题
腾讯云开发者
