jQuery双范围滑块重新加载

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

这里是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; 
    }); 
});

即使是在它松开鼠标按钮后，有时会重新加载小提琴。我在做什么错？

在此先感谢您的帮助！

格尔茨

来源

2014-02-11 DM1986

请使用您的小提琴的TidyUp按钮，并按照建议。它使你的演示更简单。 – isherwood

由于您的锚（？他们甚至不需要是锚？）没有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

来源

2014-02-11 16:42:29 isherwood

这是最好的解决方案，但如果出于某种原因想要将'href'应用于其中一个按钮，请使用[JSFiddle using e.preventDefault（）]（http://jsfiddle.net/hPkS6/ ）。基本上，在您的mouseup/mousedown事件触发后，默认事件触发。在这种情况下，由于可点击的对象是''，因此在您的mouseup/mousedown之后，它们将导致浏览器导航。通过在事件处理程序中放置e.preventDefault（），您将指示浏览器停止由于事件“冒泡”而导致的任何后续事件触发。 –

非常感谢大家！这两种解决方案都很好！ – DM1986

jQuery双范围滑块重新加载

回答

相关问题