PC鼠标拖动滑块 转变为 手机手指滑动滑块

在PC端可以用mousedown来触发一个滑块滑动的效果，但在手机上，貌似无法识别这个事件，但手机上有touchstart事件，可以通过一系列“touch”事件来替代PC端的“mouse”事件。

原来的 PC端 使用的代码：

var mousex = 0;var divLeft;//触发滑块拖动$('#rangeBtn').bind('mousedown',function(e){    mousex = e.pageX;    divLeft = $(this).position().left;    //绑定滑块移动事件    $(this).bind('mousemove',dragElement);});//结束滑块移动$(document).bind('mouseup',function(){    $('#rangeBtn').unbind('mousemove');});/** * 函数：拖动滑块**/function dragElement(event) {    var left = divLeft + (event.pageX - mousex);    if (left < 0) {        left = 0;    } else if (left > width) {        left = width;    }    $(this).css({'left' : left + 'px'});    return false;}

转变为 移动端 使用的代码：

var mousex = 0;var divLeft;//触发滑块拖动$('#rangeBtn').bind('touchstart',function(e){    mousex = e.originalEvent.targetTouches[0].pageX;    divLeft = $(this).position().left;    //绑定滑块移动事件    $(this).bind('touchmove',dragElement);});//结束滑块移动$(document).bind('touchend',function(){    $('#rangeBtn').unbind('touchmove');});/** * 函数：拖动滑块**/function dragElement(event) {    var left = divLeft + (event.originalEvent.targetTouches[0].pageX - mousex);    if (left < 0) {        left = 0;    } else if (left > width) {        left = width;    }    $(this).css({'left' : left + 'px'});    return false;}

比较两段代码可以轻易看出：
- touchstart 对应 mousedown
- touchmove 对应 mousemove
- mouseup 对应 touchend
但是，如果只切换这三个单词并没有实现滑动效果，探究了很长时间后发现要将
- e.pageX 切换成 e.originalEvent.targetTouches[0].pageX
才能真正实现移动端滑块随手指滑动。