Question

我想在自己的jQuery中构建一个双范围滑块。我的第一次尝试是有效的。但有时如果我在拖动幻灯片后释放鼠标按钮，网站会自动重新加载。我已经在jsfiddle上传了我的代码：

这是js部分：

$(document).ready(function () {

    var $dragging = null;

    $('.slider').bind("mousemove", function(e) {
        if ($dragging) {
            if (e.pageX<200) {
                $dragging.offset({
                    left: e.pageX
                });
            }

        }
   });

    $('.left_slider').bind("mousedown", function (e) {
        $dragging = $(e.target);
    });

    $('.right_slider').bind("mousedown", function (e) {
        $dragging = $(e.target);
    });

    $('.slider').bind("mouseup", function (e) {
        $dragging = null;
    });
});

即使在小提琴中，有时在释放鼠标按钮后重新加载。我做错了什么？

提前感谢您的帮助！

格尔茨

Answer 1

由于您的锚点（它们甚至需要是锚点吗？）没有href值（无效，顺便说一句），默认操作是重新加载当前页面。您需要使用preventDefault来停止该操作，或使用#或javascript:void(0)之类的值。

http://jsfiddle.net/isherwood/u2d8P/1/

<a href="#" class="left_slider"></a>
<a href="#" class="right_slider"></a>

以下是使用preventDefault进行操作的方法。感谢Joe Cullinan。

http://jsfiddle.net/hPkS6

jQuery双范围滑块重新加载

1 个答案: