解决思路:
1.记录下鼠标按下mousedown和鼠标抬起mouseup的时候当前的pageX和pageY
2.通过开方将两个位置坐标进行对比,当值等于0或者小于7的时候证明当前是点击事件,反之则是拖拽事件
3.关于原本的点击事件函数里的逻辑,现在写到判断语句里就可以了
案例附上:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#box {
width: 100px;
height: 100px;
background: lightskyblue;
position: absolute;
}
</style>
</head>
<body>
<div id="box"></div>
</body>
</html>
<script type="text/javascript">
var box = document.querySelector("#box");
var startX
var startY
var endX
var endY
box.onmousedown = (evt) => {
var e = evt || event
var ofX = e.offsetX
var ofY = e.offsetY
startX = e.pageX
startY = e.pageY
document.onmousemove = (evt) => {
var e = evt || event
var x = e.pageX - ofX
var y = e.pageY - ofY
var maxX = window.innerWidth - box.offsetWidth
var maxY = window.innerHeight - box.offsetHeight
if (x < 0) {
x = 0
}
if (y < 0) {
y = 0
}
if (x > maxX) {
x = maxX
}
if (y > maxY) {
y = maxY
}
box.style.left = x + 'px'
box.style.top = y + 'px'
}
}
document.onmouseup = (evt) => {
var e = evt || event
endX = e.pageX
endY = e.pageY
document.onmousemove = null
var d = Math.sqrt((startX - endX) * (startX - endX) + (startY - endY) * (startY - endY))
if (d === 0 || d < 7) {
console.log("执行了点击事件")
} else {
console.log("执行了拖拽事件")
}
//初始值为undefind
if (isNaN(d)) {
}
}
</script>