时间戳

首页 > 解决方案 > noUiSlider 触摸事件在基础画布菜单中不起作用

javascript - noUiSlider 触摸事件在基础画布菜单中不起作用

问题描述

我在 Foundation 6 画布菜单中使用 noUiSlider，滑块手柄不会在触摸设备上拖动。如果 noUiSlider 嵌套在画布外菜单之外，它就可以工作，甚至在使用鼠标拖动手柄时，它甚至可以在画布外菜单中正常工作。但是，当我模拟触摸事件或实际尝试在触摸设备上拖动滑块手柄时，滑块手柄不会移动并保持固定在原位。

HTML：

<div class="off-canvas position-right" id="offCanvasNestedPush" data-content-scroll="false" data-off-canvas>
    <div class="row align-middle" id="fr_wrapper_price_slider" data-initial-start="0" data-initial-end="10000000">
        <div class="columns small-12">
            <!-- noUiSlider -->
            <div id="fr_price_slider"></div>
        </div>
    </div>
</div>

JS：

var fr_price_slider_wrapper = document.getElementById('fr_wrapper_price_slider');
var fr_price_slider = document.getElementById('fr_price_slider');
noUiSlider.create(fr_price_slider, {
    /* Slider Positions on DOM Load */
    start: [
        fr_price_slider_wrapper.getAttribute('data-initial-start'),
        fr_price_slider_wrapper.getAttribute('data-initial-end')
    ],
    behaviour: 'drag',
    connect: true,
    range: {
        'min': [ 0, 5000 ],
        '50%': [ 1000000, 50000 ],
        'max': [ 10000000 ]
    }
});

标签： javascriptzurb-foundationzurb-foundation-6nouislider

解决方案

我自己回答这个问题的原因是因为我无法在 StackOverflow 上找到任何关于这个问题的问题，这是一个非常简单的解决方法。Foundation 6 的画布外菜单文档没有提到设置data-content-scroll="false"可以阻止嵌套在画布外菜单中的第三方脚本的触摸事件。我花了比我应该调试这个问题更多的时间，我希望它会在未来节省一些时间。

修正：

从画布菜单元素中删除该data-content-scroll="false"属性，noUiSlider 将按预期工作。

推荐阅读