vue实现鼠标按下选中多个元素，然后鼠标松开，检测选中元素

柔光的暖阳◎ 2022-12-27 08:40 264阅读 0赞

关于js中鼠标按下进行元素选择，鼠标松开的时候检测选了多少个元素的实现。  
写代码的时候需要实现这个功能，理了一下其中的逻辑，感觉还有点复杂，现在做一个记录。  
\*\*说明：\*\*首先要用到鼠标事件，onmousedown、onmouseup（此处不用onmousemove）  
获取坐标事件：event.pageX，event.pageY，获取相对于页面的坐标。  
getBoundingClient()函数，获取元素距离页面的距离  
用法：

rectObject = object.getBoundingClientRect();
    	rectObject.top：元素上边到视窗上边的距离;
    	rectObject.right：元素右边到视窗左边的距离;
    	rectObject.bottom：元素下边到视窗上边的距离;
    	rectObject.left：元素左边到视窗左边的距离;
    	rectObject.width：是元素自身的宽
    	rectObject.height是元素自身的高
    	在ie7及ie7以下的html元素坐标会从(2, 2)开始算起，在ie8已经修复了这个bug。//document.documentElement.clientTop返回2
        兼容 var top = rectObject.top-document.documentElement.clientTop;//left bottom right同理

页面代码：

鼠标事件绑定给父元素

getMousedowncoor(event){//获取开始坐标
            this.isMultiSelValue = [];
            // this.isMousedown = true;
            event = event || window.event;
            console.log(event.pageY);
            // this.startPoint.x = event.clientX;
            this.startPoint.y = event.pageY;
            console.log(this.$refs.selectNodeExeCLC.getBoundingClientRect());
            this.rectPosition = this.$refs.selectNodeExeCLC.getBoundingClientRect().top;//获取父元素离当前窗口的距离
            console.log(this.rectPosition);
        },

getMouseupcoor(event){//获取结束坐标
            var startNumber;
            // this.isMousedown = false;
            event = event || window.event;
    
            this.endPoint.y = event.pageY;
            if(this.endPoint.y<this.startPoint.y){//判断是从后往前选还是从前往后选，如果是从后往前，则交换两个坐标位置
                var temp;
                temp = this.startPoint.y;
                this.startPoint.y = this.endPoint.y;
                this.endPoint.y = temp;
            }
            var absoluteP = this.startPoint.y-3- this.rectPosition; //记录点击位置距离父元素的距离，3是子元素离父元素有3px的距离
            console.log(absoluteP);
            startNumber = Math.floor(absoluteP/15.5);//从第几个div开始选择的,从0开始记，子元素高15.5px
            if(absoluteP%15.5 == 0){//检测鼠标按下的临界值
                startNumber--;
            }
            
            var endNumber = Math.ceil((this.endPoint.y-3-this.rectPosition)/15.5);//记录选到第几个div结束
    
            console.log("start"+startNumber);
            console.log("end"+endNumber);
            console.log(event.pageY);
    
            this.alternative.map((item,index)=>{//将选中的项存到新数组里面
                // console.log(index);
                if(index==startNumber){
                    this.flag = true;
                    if(startNumber<endNumber){
                        startNumber++;
                        this.isMultiSelValue.push(item);
                    }
                }
            });
    
            console.log(this.isMultiSelValue);
        },