Question

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

HTML：

public void InputReader()
{
    string inputForTranslating = inputForTranslator.Text;

    Dictionary<string, string> morseDictionary = new Dictionary<string, string>
    {
        { " ", " " }, { ",", "--..--" }, { ".", ".-.-.-" }, { "\\?", "..--.." }, { "0", "-----" }, { "1", ".----" }, { "2", "..---" }, { "3", "...--" },
        { "4", "....-" }, { "5", "....." }, { "6", "-...." }, { "7", "--..." }, { "8", "---.." }, { "9", "----." }, { "A", ".-" },
        { "B", "-..." }, { "C", "-.-." }, { "D", "-.." }, { "E", "." }, { "F", "..-." }, { "G", "--." }, { "H", "...." }, { "I", ".." },
        { "J", ".---" }, { "K", "-.-" }, { "L", ".-.." }, { "M", "---" }, { "N", "-." }, { "O", "---" }, { "P", ".--." }, { "Q", "--.-" },
        { "R", ".-." }, { "S", "..." }, { "T", "-" }, { "U", "..-" }, { "V", "...-" }, { "W", ".--" }, { "X", "-..-" }, { "Y", "-.--" },
        { "Z", "--.." }
    };

    char[] charArray = inputForTranslating.ToCharArray();
    for (int i = 0; i < charArray.Length; i++)
    {

        outPutTranslation.Text = outPutTranslation.ToString().Replace(morseDictionary.Keys, morseDictionary.Values); ////This is where the error occurs "cannot convert from 'System.Collections.Generic.Dictionary<string, string>.KeyCollection' to 'char'"
    }
}

JS：

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

Answer 1

我自己回答这个问题的原因是因为我无法在StackOverflow上找到任何有关此问题的问题，这是一个非常简单的解决方法。 Foundation 6的“画布”菜单文档并未提及设置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 ] } });会阻止嵌套在“画布”菜单中的第三方脚本的触摸事件。我花费的时间远远超过了调试该问题的时间，我希望它可以在将来节省一些时间。

Bugfix：

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

Answer 2

正如您已经发现的，contentScroll选项是造成此问题的原因，因为它可以防止触摸事件（如果启用）。您的“错误修正”不是真正的解决方案，因为该选项具有存在的权利！

有些用例（例如在我的项目中）是您需要的。但是，解决方案是noUiSlider的附加选项，它提供了更改滑块范围的可能性。

我已经提交了去年的PR，但尚未合并 https://github.com/leongersen/noUiSlider/pull/821

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

2 个答案: