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;
});
});
即使是在它松开鼠标按钮后,有时会重新加载小提琴。 我在做什么错?
在此先感谢您的帮助!
格尔茨
由于您的锚(?他们甚至不需要是锚?)没有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。
这是最好的解决方案,但如果出于某种原因想要将'href'应用于其中一个按钮,请使用[JSFiddle using e.preventDefault()](http://jsfiddle.net/hPkS6/ )。 基本上,在您的mouseup/mousedown事件触发后,默认事件触发。在这种情况下,由于可点击的对象是'',因此在您的mouseup/mousedown之后,它们将导致浏览器导航。 通过在事件处理程序中放置e.preventDefault(),您将指示浏览器停止由于事件“冒泡”而导致的任何后续事件触发。 –
非常感谢大家!这两种解决方案都很好! – DM1986
请使用您的小提琴的TidyUp按钮,并按照建议。它使你的演示更简单。 – isherwood