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
才能真正实现移动端滑块随手指滑动。