js监听鼠标拖动事件(按住左键拖动触发，松开左键取消)

 此段代码，实现了左键点击id元素内区域后，拖动鼠标到边缘区域滚动条(内部class元素的滚动条)自动滚动，松开鼠标后取消事件

业务需要记录一下

$(function () {
        var div=document.getElementById("元素id");
        div.onmousedown=function(e){
               document.onmousemove=function(e){
                   var xx=e.clientX || e.clientx ||0;
                var yy=e.clientY || e.clienty ||0;
                //首先获得鼠标位置坐标
                var T1=yy;
                var L1=xx;
                //然后设置该两个差值的筏值 T1max T1min L1max L1min；
                //.content为元素id下的子元素，实际想监听这个class,由于js监听id比较方便，改为了监听带id的父元素
                var T1max= $(".content").height()*0.95;
                var T1min= $(".content").height()*0.5;
                var L1max= $(".content").width()*0.95;
                var L1min= $(".content").width()*0.3;
                //当T1 大于 T1max 或者小于 T1min 时，触发滚动条动作，变化速度为 T1 与 筏值的差值(每秒) [滑动效果另议]
                if(T1>T1max) $(".content").scrollTop( $(".content").scrollTop()+T1-T1max);
                if(T1<T1min) $(".content").scrollTop( $(".content").scrollTop()+T1-T1min);
                //同上，处理L1
                if(L1>L1max) $(".content").scrollLeft( $(".content").scrollLeft()+L1-L1max);
                if(L1<L1min) $(".content").scrollLeft( $(".content").scrollLeft()+L1-L1min);
                
               };
               document.onmouseup=function(){
                   document.onmouseup=null;
                   document.onmousemove=null;
               };
         };
    });

最后

以上就是安静时光为你收集整理的js监听鼠标拖动事件(按住左键拖动触发，松开左键取消)的全部内容，希望文章能够帮你解决js监听鼠标拖动事件(按住左键拖动触发，松开左键取消)所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。