【js】原生js拖动事件（pc端和移动端）

注意

1.pc端和移动端绑定的事件不同：

​ pc端需要绑定的事件有三个（对于鼠标来说存在按下拖动和不按下鼠标移动的两种情况）：

​ mousedown（鼠标按下）,mousemove（鼠标移动），mouseup（鼠标按键抬起）

​ 移动端需要绑定的事件只有两个（只要滑动就肯定已经按住屏幕了）：

​ touchstart（触点按下），touchmove（触点移动）

2.逻辑的不同：

pc端的mousemove事件不需要鼠标按下，所以需要特别处理。

否则会出现鼠标未按下，就一直触发mousemove事件的情况。

最好的处理方式是：mousedown事件触发时绑定mousemove事件，mouseup事件触发时，解除mousemove事件。

3.解绑事件使用：元素removeEventListener(事件类型，函数)。

//注意：如果绑定的函数是匿名函数则无法解绑
ele.addEventListener('click',(e)=>{
   
	console.log("click")
})

//可以写成
function click1(e){
   
    console.log("click")
}
ele.addEventListener('click',click1})	//绑定成功
ele.removeEventListener('click',click1)	//解绑成功

//或者
let func = null 
ele.addEventListener('click',func=(e)=>{
   
	console.log("click")
})
ele.removeEventListener('click',func)	//解绑成功

代码结构

//pc端
//第一种：
//事件全都绑定给元素，
//缺点：无法适应鼠标移动过快的情况，元素跟不上，且无法判断鼠标超出浏览器范围的情况

let 鼠标按下时的位置

function 鼠标按下事件(){
   
    记录 鼠标按下时的位置
    ele.addEventListener('mousemove',鼠标移动事件)
}
function 鼠标抬起事件(){
   
    ele.removeEventListener('mousemove',鼠标移动事件)
}
function 鼠标移动事件(e){
   
    let 当前位置 = 获取当前位置
    let 移动距离 = 当前位置 - 鼠标按下的位置
    //操作
}
let ele = 获取元素
//绑定鼠标按下事件
ele.addEventListener('mousedown',鼠标按下事件)
ele.addEventListener('mouseup',鼠标移动事件)

//第二种
//把事件绑定给document
//可以解决第一种的缺点
let 鼠标按下时的位置
let ele = 获取元素

function 鼠标按下事件(e){
   
    //判断被点击的元素是否是目标元素
    if(e.target!=ele) return 
    
    记录 鼠标按下时的位置
    document.addEventListener('mousemove',鼠标移动事件)
}
function 鼠标抬起事件(e){
   
    document.removeEventListener('mousemove',鼠标移动事件)
}
function 鼠标移动事件(e){
   
    let 当前位置 = 获取当前位置
    let 移动距离 = 当前位置 - 鼠标按下的位置
    //操作
}
document.addEventListener('mousedown',鼠标按下事件)
document.addEventListener('mouseup',鼠标移动事件)

<