用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>