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

帖子：http://bbs.****.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>