可以禁用幻灯片的触摸模拟，但不能禁用滚动条（危险的滑动器）？答案

【问题标题】：Possible to disable touch simulation for slides but not scrollbar (idangerous swiper)?可以禁用幻灯片的触摸模拟，但不能禁用滚动条（危险的滑动器）？
【发布时间】：2014-05-21 10:38:56
【问题描述】：

我的页面上有一个危险的滑动器，它成功地模拟了幻灯片和随附滚动条上的触摸事件（允许鼠标单击和移动以向左或向右滑动幻灯片）。

这很好，但我现在在滑动器内的幻灯片上调用了可拖动，这意味着我需要停止这种触摸模拟（同时拖动幻灯片并移动它们会造成混乱） - 但仅限于幻灯片，而不是滚动条（我仍然需要滚动条在鼠标单击和移动之后发挥作用）。

我的尝试

根据 API 我可以禁用触摸模拟：

var swiper = new Swiper('.swiper', {
    slidesPerView: 3,
    simulateTouch: false,
    scrollbar: {
        container: '.swiper-scrollbar',
        hide: false,
        draggable: true,
        snapOnRelease: true
    }
});

这按预期工作，但在滚动条和幻灯片上都不好。

我还尝试从 swiper api 公开的一些事件中返回 false：

var swiper = new Swiper('.swiper', { slidesPerView: 3, onTouchStart: function() { return false; }, scrollbar: { container: '.swiper-scrollbar', hide: false, draggable: true, snapOnRelease: true } });

这根本没有任何作用。

【问题讨论】：

标签： javascript jquery swiper

【解决方案1】：

这是 Swiper-3.3.1 的解决方案

simulateTouch:false

【讨论】：

此选项尚未记录。谢谢！我正在使用它来禁用非触摸设备上基于滑动的导航。
给你一个赞成票和答案票。我相信我当时是对的，几年过去了，我认为你的更相关。

【解决方案2】：

我找到了一种方法，目前我很满意。

在 idangerous swiper 源代码 (idangerous.swiper-2.1.js) 中，我从 onTouchStart 函数（第 1120 行）返回 false，因此我的代码现在类似于以下内容：

    function onTouchStart(event) {
    if (params.preventLinks) _this.allowLinks = true;
    //Exit if slider is already was touched

    return false;

    if (_this.isTouched || params.onlyExternal) {
        return false;
    }

这对滚动条原型的工作方式也是非侵入性的，因此滚动条的触摸事件保持不变。

【讨论】：

【解决方案3】：

Swiper-6.6.2 的解决方案。

只需添加到您不想被刷卡的对象的类'swiper-no-swiping'。然后只需将以下代码添加到您的 js 文件中。

const swiper = new Swiper('.swiper-container', {
    noSwipingClass: 'swiper-no-swiping'
});

【讨论】：