Question

我有一个滑块，我试图通过鼠标移动滑动，但它不会自然地移动它分阶段跳，但我不知道为什么。

我这里有一个jsfiddle： http://jsfiddle.net/97Mnf/3/您将看到滑块无法正确移动鼠标。

我的代码是：

window.onload = function(){
    document.getElementById('cursor').addEventListener("mousedown", mousePos, false);   
}

function mousePos(e){   
    var x = e.pageX;
    document.getElementById('cursor').addEventListener("mousemove", function(e){mousemoveCalc(e,x);}, false);
    document.getElementById('cursor').removeEventListener("mouseup", mousemoveCalc, false); //not working
    document.getElementById('cursor').removeEventListener("mouseout", mousemoveCalc, false); //not working
}   

function mousemoveCalc(e,x){    
    var difx = 0 + parseInt(x + e.pageX);

            if(difx > 270){
                 difx=270;
            }else if(difx<0){
                 difx=0;
            }

    document.getElementById('cursor').style.left = difx+'px';

}

Answer 1

尝试使用var difx = e.pageX-x;代替x+e.pageX。此外，您可能希望将mousemove事件附加到文档本身，因此在拖动时不需要将鼠标放在滑块上。最后，你的mouseup逻辑完全错了。您需要添加一个事件侦听器，在触发时删除所有处理程序

滑动div不能顺利移动

1 个答案: