js判断鼠标移动

JavaScript013

js判断鼠标移动,第1张

用on事件,就是onmousemove(每一个像素移动)

原型:Element.onmousemove = function (){

    ...

}

实例:window.onmousemove = function (){

    alert('鼠标移动了!')

}

另外,拖动(理解不了题目具体)用on事件,就是ondragstart(选择元素并拖动了)

原型:Element.ondragstart = function (){

    ...

}

实例:window.ondragstart = function (){

    alert('鼠标拖动了元素!')

}

原理就是通过比较鼠标的XY坐标来判断。我不知道有没有其他的方式了,就拿知道的来说。下面是实现代码。

<script>

var lastX = null,

lastY = null

window.onmousemove = function(event){

var curX = event.clientX,

curY = event.clientY,

direction = ''

// console.info(event)

// console.info(event.clientX)

// console.info(event.clientY)

// 初始化坐标

if(lastX == null || lastY == null){

lastX = curX

lastY = curY

return

}

if(curX >lastX){

direction += 'X右,'

}else if(curX <lastX){

direction += 'X左,'

}else{

direction += 'X居中,'

}

if(curY >lastY){

direction += 'Y上'

}else if(curY <lastY){

direction += 'Y下'

}else{

direction += 'Y居中'

}

lastX = curX

lastY = curY

console.info(direction)

document.body.innerText = direction

}

</script>