鼠标拖拽事件变成触摸事件

最新推荐文章于 2024-08-07 15:23:58 发布

原创最新推荐文章于 2024-08-07 15:23:58 发布 · 461 阅读

2 ·

CC 4.0 BY-SA版权

本文探讨如何将传统的鼠标拖拽事件在触屏设备上转化为触摸事件，以实现跨平台的交互体验。通过分析和实现相关事件的映射，确保在不同设备上的操作一致性。

鼠标·拖拽事件：


// 弹窗滑动事件
var mouseTop, prevTop=nexTop=moveOffset=0, resetFlag=false;
var slideContainer = document.getElementsByClassName("container")[0];
var slideMove = document.getElementsByClassName("phone")[0];
//鼠标开始拖拽
slideMove.addEventListener("mousedown",start);
function start(e){
    //console.log("新的移动");
    //重置
    if(resetFlag)
    {
        moveOffset=0;
        resetFlag = false;
        //console.log("新的重置");
    }
    //获取开始位置，该div含有margin值，防止拖拽时出现位置偏移
    prevTop = e.pageY - slideContainer.offsetTop + parseInt(getComputedStyle(slideContainer)['margin-top']);
    //鼠标进行拖拽
    document.addEventListener("mousemove",move);
    //鼠标拖拽结束
    document.addEventListener("mouseup",cancel);

    stopEvent(e);
}
function move(e){
    // 鼠标左键按下
    if (e.button == 0) {
        nexTop = e.pageY - slideContainer.offsetTop + parseInt(getComputedStyle(slideContainer)['margin-top']);
        moveOffset += nexTop - prevTop;

        //var containerBottom = Number(slideContainer.style.bottom.replace("px", ""));
        //当偏移量超过当前弹窗的高度，该弹窗消失
        if(slideContainer.offsetHeight <= moveOffset)
        {
            slideContainer.style.bottom = (-slideContainer.offsetHeight) + "px";
            resetFlag = true;
            //console.log("向下重置");
        }
        //当位移偏移量小于0时，弹窗位于页面底部
        else if(-moveOffset >= 0)
        {
            slideContainer.style.bottom = "0px";
            resetFlag = true;
            //console.log("向上重置");
        }
        //否则继续向下移动
        else
        {
            //console.log("继续");
            slideContainer.style.bottom = (-moveOffset) + "px";
        }
            
        //console.log("偏移量是 " + moveOffset + ", 上次距离父容器顶部是 " + prevTop + ", 本次距离父容器顶部是 " + nexTop);
        prevTop = nexTop;
    }

    stopEvent(e);
}
//当鼠标拖拽结束之后，解除事件绑定
function cancel(e){
    document.removeEventListener("mousemove",move);
    document.removeEventListener("mouseup",cancel);
}
// 阻止默认事件和冒泡事件
function stopEvent(e) {
    var e = e || window.event;
    if(e.preventDefault){
        e.preventDefault();
        e.stopPropagation();
    }
    else {
        e.returnValue = false;
        e.cancelBubble = true;
    }
}

触摸事件：

// 弹窗滑动事件
var mouseTop, prevTop=nexTop=moveOffset=0, resetFlag=false;
var slideContainer = document.getElementsByClassName("container")[0];
var slideMove = document.getElementsByClassName("phone")[0];
//开始触摸事件
slideMove.addEventListener("touchstart",start);
function start(e){
    //重置
    if(resetFlag){
        moveOffset=0;
        resetFlag=false;
    }
    //获取初始位置，该div含有margin值，防止拖拽时出现位置偏移
    prevTop=e.targetTouches[0].pageY-slideContainer.offsetTop + parseInt(getComputedStyle(slideContainer)['margin-top']);
    console.log("start");
    stopEvent(e);
}
//触摸过程事件
slideMove.addEventListener("touchmove",move);
function move(e){
    //获取触摸过程位置
    nexTop=e.targetTouches[0].pageY-slideContainer.offsetTop + parseInt(getComputedStyle(slideContainer)['margin-top']);
    //累计位置偏移量
    moveOffset += nexTop - prevTop;
    //当偏移量超过当前弹窗的高度，该弹窗消失
    if(slideContainer.offsetHeight<=moveOffset)
    {
        slideContainer.style.bottom = (-slideContainer.offsetHeight) + "px";
        resetFlag=true; 
    }
    //当位移偏移量小于0时，弹窗位于页面底部
    else if(-moveOffset>=0)
    {
        slideContainer.style.bottom = "0px";
        resetFlag=true;
    }
    //否则继续向下移动
    else
    {
        slideContainer.style.bottom = (-moveOffset) + "px";
    }
    prevTop = nexTop;
    console.log("move");
    stopEvent(e);
}
//触摸事件结束
// slideMove.addEventListener("touchend",function(e){
//     console.log("end");
//     stopEvent(e);
// });
//阻止默认事件和冒泡事件
function stopEvent(e){
    var e = e || window.event;
    if(e.preventDefault)
    {
        e.preventDefault();
        e.stopPropagation();
    }
     else {
         e.returnValue = false;
         e.cancelBubble = true;
         }
}