jQuery双范围滑块重新加载

Question

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

http://jsfiddle.net/u2d8P

这是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值（无效，btw），因此默认操作是重新加载当前页面。 您需要使用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