3

我正在使用滑块的 JQuery Mobile 中构建一个评估工具。我将所有内容都放在一个文件中，其中包含多个 div 来分隔每一页。我有一个允许左右滑动的脚本。因为脚本没有区分用户滑动和使用滑块的时间，所以当他们调整滑块时它会翻转到下一页。

我希望用户能够滑动到下一页，但不是在他们调整滑块时。有什么建议么？？这是滑动事件：

<script type="text/javascript">
        $('div.ui-page').live("swipeleft", function(){
            var nextpage = $(this).next('div[data-role="page"]');
            if (nextpage.length > 0) {
            $.mobile.changePage(nextpage, {transition: "slide"}, false, true);
            }
        });

        $('div.ui-page').live("swiperight", function(){
            var prevpage = $(this).prev('div[data-role="page"]');
            if (prevpage.length > 0) {
            $.mobile.changePage(prevpage, {transition: "slide",
            reverse: true}, true, true);
            }
        });
</script>

这是滑块和页面：

<div data-role="page">
        <h2>I can react quickly</h2>
        <input type="range" name="strength" id="strength" data-highlight="true" min="0" max="10" value="0">
</div>

我真的很感激任何帮助或建议！

4

1 回答 1

3

在处理滑动手势时，您可以使用最接近（）来检查事件目标元素是否不在滑块小部件内：

$("div.ui-page").live("swipeleft", function(e) {
    if (!$(e.target).closest(".ui-slider, .ui-slider-track").length) {
        var nextpage = $(this).next('div[data-role="page"]');
        if (nextpage.length > 0) {
            $.mobile.changePage(nextpage, {transition: "slide"}, false, true);
        }
    }
});

请注意，live( ) 自 jQuery 1.7 起已被弃用，取而代之的是on()，并在 jQuery 1.9 中被删除，因此最好这样写：

$(document).on("swipeleft", "div.ui-page", function(e) {
    if (!$(e.target).closest(".ui-slider, .ui-slider-track").length) {
        // ...
    }
});
于 2013-03-29T08:08:04.760 回答