javascript - 如何在 swiper.js 中使用滑块输入

Question

我正在为移动设备构建一个 html 应用程序（与 PhoneGap 一起使用），并且我正在使用 idangero.us 的 swiper 进行页面转换。

在其中一个页面中，我有一个 html5 视频标签，但每次我尝试使用音量滑块时，都会激活 swiper。我怎样才能避免这种情况？

例如，考虑以下情况：

<div class="swiper-container">
    <div class="swiper-wrapper">
        <div class="swiper-slide">
            <video src="some_movie_url" controls></video>
        </div>
        <div class="swiper-slide">
            Foo
        </div>
        <div class="swiper-slide">
            Bar
        </div>
    </div>
</div>

接着：

new Swiper('.swiper-container', {speed: 250, freeMode: false});

是否有任何“简单”的方法可以使视频控件正常工作？还是我应该捕获所有滑动事件并自己处理它们？

Answer 1

使用 stopPropagation “触摸”视频元素时，您可以轻松阻止 Swiper 事件：

$('video').on('touchstart mousedown', function(e){
  e.stopPropagation()
})