js处理拖拽事件与点击事件并存

最新推荐文章于 2023-09-15 11:40:50 发布

素描本里的男子

最新推荐文章于 2023-09-15 11:40:50 发布

阅读量2.9k

点赞数 2

分类专栏： javascript jQuery vue 文章标签：拖拽事件与点击事件并存拖拽事件不触发点击事件将拖拽事件和点击事件区分开

本文链接：https://blog.csdn.net/weixin_44963099/article/details/103287253

版权

javascript 同时被 3 个专栏收录

76 篇文章 2 订阅

订阅专栏

vue

26 篇文章 0 订阅

订阅专栏

jQuery

10 篇文章 0 订阅

订阅专栏

解决思路：
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>

素描本里的男子

关注

2
点赞
踩
4

收藏

觉得还不错? 一键收藏
1
评论
js处理拖拽事件与点击事件并存

解决思路：1.记录下鼠标按下mousedown和鼠标抬起mouseup的时候当前的pageX和pageY2.通过开方将两个位置坐标进行对比，当值等于0或者小于7的时候证明当前是点击事件，反之则是拖拽事件3.关于原本的点击事件函数里的逻辑，现在写到判断语句里就可以了案例附上：<!DOCTYPE html><html><head> <meta...
复制链接

扫一扫

专栏目录