您的位置: 首页  >  IT文章  >  JS怎么将拖拉事件与点击事件分离

JS怎么将拖拉事件与点击事件分离

分类: IT文章 • 2023-11-23 23:01:01
JS如何将拖拉事件与点击事件分离？

帖子：http://bbs.csdn.net/topics/390785395?page=1#post-397369340


如何将拖拉事件跟点击事件分离？
需要做到：拖拉时不触动点击事件

<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>
            js拖拽组件1
        </title>
	<script type="text/javascript" src="Drag.js"></script>
        <script type="text/javascript">
        window.onload = function(){
			Drag.init(document.getElementById("handle1"),document.getElementById("handle1"));//handle和dragBody都是一样的 这是就相当于是拖动handle本身
		}
        </script>
        <style type="text/css">
        
        </style>
    </head>
    <body>
        <div id="handle1" style="border:1px solid red;width:150px;height:30px;position:absolute;left:100px;top:100px;" onclick="alert(2);">
		拖拉我、点击我
	</div>
    </body>
</html>

Drag.js 

var Drag={
    "obj":null,
	"init":function(handle, dragBody, e){
		if (e == null) {
			handle.onmousedown=Drag.start;
		}
		handle.root = dragBody;
		
		if(isNaN(parseInt(handle.root.style.left)))handle.root.style.left="0px";
		if(isNaN(parseInt(handle.root.style.top)))handle.root.style.top="0px";//确保后来能够取得top值
		handle.root.onDragStart=new Function();
		handle.root.onDragEnd=new Function();
		handle.root.onDrag=new Function();
		if (e !=null) {
			var handle=Drag.obj=handle;
			e=Drag.fixe(e);
			var top=parseInt(handle.root.style.top);
			var left=parseInt(handle.root.style.left);
			handle.root.onDragStart(left,top,e.pageX,e.pageY);
			handle.lastMouseX=e.pageX;
			handle.lastMouseY=e.pageY;
			document.onmousemove=Drag.drag;
			document.onmouseup=Drag.end;
		}
	},
	"start":function(e){
		var handle=Drag.obj=this;
		e=Drag.fixEvent(e);
		var top=parseInt(handle.root.style.top);
		var left=parseInt(handle.root.style.left);
		//alert(left)
		//一般情况下 left top 在初始的时候都为0
		handle.root.onDragStart(left,top,e.pageX,e.pageY);
		handle.lastMouseX=e.pageX;
		handle.lastMouseY=e.pageY;
		document.onmousemove=Drag.drag;
		document.onmouseup=Drag.end;
		return false;
	},	
	"drag":function(e){//这里的this为document 所以拖动对象只能保存在Drag.obj里
		e=Drag.fixEvent(e);
		var handle=Drag.obj;
		var mouseY=e.pageY;
		var mouseX=e.pageX;
		var top=parseInt(handle.root.style.top);
		var left=parseInt(handle.root.style.left);//这里的top和left是handle.root距离浏览器边框的上边距和左边距
		
		var currentLeft,currentTop;
		currentLeft=left+mouseX-handle.lastMouseX;
		currentTop=top+(mouseY-handle.lastMouseY);
		
		//上一瞬间的上边距加上鼠标在两个瞬间移动的距离 得到现在的上边距
		
		handle.root.style.left=currentLeft +"px";
		handle.root.style.top=currentTop+"px";
		
		//更新当前的位置
		
		handle.lastMouseX=mouseX;
		handle.lastMouseY=mouseY;
		
		//保存这一瞬间的鼠标值 用于下一次计算位移
		
		handle.root.onDrag(currentLeft,currentTop,e.pageX,e.pageY);//调用外面对应的函数
		return false;
	},
	"end":function(){
		document.onmousemove=null;
		document.onmouseup=null;
		Drag.obj.root.onDragEnd(parseInt(Drag.obj.root.style.left),parseInt(Drag.obj.root.style.top));
		Drag.obj=null;
	},
	"fixEvent":function(e){//格式化事件参数对象
		if(typeof e=="undefined")e=window.event;
		if(typeof e.layerX=="undefined")e.layerX=e.offsetX;
		if(typeof e.layerY=="undefined")e.layerY=e.offsetY;
		if(typeof e.pageX == "undefined")e.pageX = e.clientX + document.body.scrollLeft - document.body.clientLeft;
		if(typeof e.pageY == "undefined")e.pageY = e.clientY + document.body.scrollTop - document.body.clientTop;
		return e;
	}
};


问题应该出在onmouseup时也调用了onclick方法。网上找了方法，其中，http://www.cnblogs.com/A_ming/archive/2013/03/08/2950346.html 不知如何应用进来。

后来想了另一个方法，就是添加一个公共变量，在onmousedown、onmouseup、onclick分别获取鼠标的坐标，并记录在公共变量里，做了个小例子区分他们执行的顺序，如下：

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<div id="x" style="border:1px solid #ddd;">xxxxxxxxxxxxxxxxxxxxxxxx</div>
</body>
</html>
	<script type="text/javascript">
		var d  = document.getElementById("x");
		var shubiaoX = 0;
		d.onmousedown=function(){
			console.log("mousedown");
			shubiaoX = event.screenX;
			console.log("1:"+shubiaoX);
		}
		d.onmouseup=function(){
			console.log("mouseup");
			shubiaoX = event.screenX;
			console.log("2:"+shubiaoX);
		}
		d.onclick=function(){
			console.log("click");
			shubiaoX = event.screenX;
			console.log("3:"+shubiaoX);
		}
	</script>

发现执行的顺序为onmousedown、onmouseup、onclick

原位置点击：

mousedown mouse.html:20
1:169 mouse.html:22
mouseup mouse.html:25
2:169 mouse.html:27
click mouse.html:15
3:169

拖动点击：

mousedown mouse.html:20
1:360 mouse.html:22
mouseup mouse.html:25
2:473 mouse.html:27
click mouse.html:15
3:473

上面可以发现，拖动点击的mousedown后移动，mouseup与click事件鼠标坐标发生变化，且一样。


故而，可以判断鼠标的坐标来区分是拖动点击还是原地点击~


当然这个是个土的办法，如果有更好的请回复~


相关推荐