Question

我正在使用滑块在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>

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

Answer 1

在处理滑动手势时，您可以使用closest()检查事件目标元素是否不在滑块小部件内：

$("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);
        }
    }
});

请注意，自jQuery 1.7以来，live()已被弃用，而{j。1.7}已被删除，因此最好写一下：

$(document).on("swipeleft", "div.ui-page", function(e) {
    if (!$(e.target).closest(".ui-slider, .ui-slider-track").length) {
        // ...
    }
});

JQuery Mobile Slider被视为滑动事件

1 个答案: