怎么记录鼠标按下时的坐标，紧接着移动的坐标，最后鼠标弹起的坐标

最新推荐文章于 2022-08-25 09:37:49 发布

置顶欢乐程序小姐姐

最新推荐文章于 2022-08-25 09:37:49 发布

阅读量1k

点赞数 3

本文链接：https://blog.csdn.net/weixin_46513664/article/details/104747099

版权

jQuery的话可以参照这段代码（这段是zepto 其实跟jQuery一样）：

//设置  手指拖拽进度滑块 的事件
    function moveUp() {
        //开始按下手指事件
        $(".runing_circle").on("touchstart", function (event) {
            move = true;
            event.preventDefault();
            _x = event.touches[0].pageX - parseInt($(".runing_circle").css("left"));
            _y = event.touches[0].pageY;

            console.log(($("#aa").css("left")));
        })
        //移动手指事件
        $(".runing_circle").on("touchmove", function (event) {
            event.preventDefault();
            if (move) {
                x = event.touches[0].pageX - _x;
                $(".runing_circle").css("left", x);
                $(".runing_color").css("width", x);
            }
            console.log(22222);
        })
        //松开手指事件
        $(".runing_circle").on("touchend", function (event) {
            event.preventDefault();
            move = false;
            console.log(33333);
        })
    }

然后js的话参照下面这段代码

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf8">
    <style type="text/css">

    </style>
    <script type="text/javascript">
    window.onload=function(){
        var drag=document.getElementById("drag");
        var flag=0;
        // var currentTop;
        drag.onmousedown=function(e){
           flag=1;
           e=e||window.event;
           
           this.kTop=e.clientY-this.offsetTop;//如果不减去,则鼠标总是在原点
           this.kLeft=e.clientX-this.offsetLeft;
         

        }
        
        drag.onmousemove=function(e){
            if(flag==1){
                e=e||window.event;
                drag.style.top=e.clientY-drag.kTop+"px";
                drag.style.left=e.clientX-drag.kLeft+"px";

            }
            

        
        }
        drag.onmouseup=function(){
            flag=0;

        }
    }
    </script>
</head>
<body bgcolor="gray">
<div style="width:400px;height:300px;background:white;border:2px solid  red;position: absolute;cursor:default;" id="drag">
    

</div>

</body>
</html>

原生JS的话，主要使用 mousedown, mouseup, mousemove 事件来监听鼠标操作，代码如下：

var press = false;

// The mousedown event is fired when a pointing device button (usually a mouse button) is pressed on an element.
document.addEventListener('mousedown', function(e) {
    press = true;
    console.log('--> Event mousedown x: ' + e.clientX + ', y: ' + e.clientY);
});

// The mousemove event is fired when a pointing device (usually a mouse) is moved while over an element.
document.addEventListener('mousemove', function(e) {
    if (!press) return;
    console.log('--> Event mousemove x: ' + e.clientX + ', y: ' + e.clientY);
});

// The mouseup event is fired when a pointing device button (usually a mouse button) is released over an element.
document.addEventListener('mouseup', function(e) {
    press = false;
    console.log('--> Event mouseup x: ' + e.clientX + ', y: ' + e.clientY);
});

欢乐程序小姐姐

关注

3
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
怎么记录鼠标按下时的坐标，紧接着移动的坐标，最后鼠标弹起的坐标

jQuery的话可以参照这段代码（这段是zepto 其实跟jQuery一样）：//设置手指拖拽进度滑块的事件 function moveUp() { //开始按下手指事件 $(".runing_circle").on("touchstart", function (event) { move = true; ...
复制链接

扫一扫