帖子：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
mouseup
mouse.html:25
3:169

拖动点击：

mousedown
mouse.html:20
mouseup
mouse.html:25
3:473

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

故而，能够推断鼠标的坐标来区分是拖动点击还是原地点击~

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

JS怎样将拖拉事件与点击事件分离？的更多相关文章

  1. (网页)HTML5 Canvas ( 事件交互, 点击事件为例 ) isPointInPath(转)

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  2. HTML5 Canvas ( 事件交互, 点击事件为例 ) isPointInPath

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  3. [前端][自定义DOM事件]不使用setTimeout实现双击事件或n击事件

    使用setTimeout实现双击事件 例如,这样: let div = document.getElementById("div"); doubleClick(div, funct ...

  4. WebView 实现JS效果和a标签的点击事件

    目前很多android app都可以显示web页面的界面,嵌入式开发,这个界面一般都是WebView这个控件加载出来的,学习该控件可以为你的app开发提升扩展性. 先说下WebView的一些优点: 可 ...

  5. 防止多次引入js文件导致的重复注册点击事件

    前端代码中的js文件如果是动态引入的或者是某个事件操作进行注册的,那么重复的引入js文件或者多次触发注册事件会导致事件多次进行注册,造成不必要的麻烦,所以需要在每次注册之前将先前的事件进行取消,下面以 ...

  6. Android长按事件和点击事件问题处理，OnItemLongClickListener和OnItemClickListener冲突问题

    今天在做demo时,须要设置ListView的item的长按和点击事件.OnItemLongClickListener和OnItemClickListener,然而点击事件能够实现,可是在长按操作时会 ...

  7. Android长按事件和点击事件 冲突问题

    长按点击的时候默认会触发点击事件,android系统是优先点击的,并且没有返回值:而长按事件是有返回值的,如果返回false,两个事件都会有响应,如果返回true则只响应长按事件.

  8. threejs Object的点击(鼠标)事件(获取点击事件的object)

    objects=[]; raycaster = new THREE.Raycaster(); mouse = new THREE.Vector2(); //监听全局点击事件,通过ray检测选中哪一个o ...

  9. input中blur失去焦点事件与点击事件冲突时如何解决

    方法一 使用setTimeout $(function(){ $(".cy-name-input input").on({ focus:function() { $(". ...

随机推荐

  1. mac平台adb、tcpdump捕手android移动网络数据包

    在移动电话的发展app当我们希望自己的下才能看到app网络发出请求,这个时候我们需要tcpdump工具包捕获.实现tcpdump空灵,以下步骤需要: 在这里,在android 华为手机 P6对于样本 ...

  2. 【Java基础】对象的具体创建过程

    所有的类(以Dog类为例)在第一次使用时,动态的加载到JVM中,当首次创建Dog对象时,或者是Dog类的静态方法.静态属性域在第一次被访问时,JVM解释器查找到classpath,定位到Dog.cla ...

  3. 解决无法切换到jenkins用户的问题

    su - jenkins一直有效,今天在centos发现无效,原因是 /etc/password文件里的/bin/bash被yum安装的时候变成了/bin/false. 改动后就能够了. ubuntu ...

  4. unity3d c# 产生真正的随机数

    虽然能够使用Random类来生成随机数.但它是系统时钟种子,因此,有大量的反复产生伪随机数的. 您可以使用RNGCryptoServiceProvider();相对真随机数生成. 由加密服务提供程序( ...

  5. Android学习路径（七）建立Action Bar

    在action bar最今本的形式中,它只在左边展示了activity的标题以及应用的icon. 即使在这样的简单的形式中,它也不过告诉用户如今在应用的哪个activity中,同一时候为你的应用保持一 ...

  6. Docker创建MySQL集装箱

    原文链接:Docker创建MySQL集装箱 这样做的目的是创建一个MySQL的image,出来的容器里自己主动启动MySQL服务接受外部连接 步骤: 1. 首先创建一个文件夹并在文件夹下创建一个Doc ...

  7. Property 和 Attribute 的区别（转）

    property 和 attribute非常容易混淆,两个单词的中文翻译也都非常相近(property:属性,attribute:特性),但实际上,二者是不同的东西,属于不同的范畴. property ...

  8. Go如何发送广播包

    发送网络数据包成三种方式,每间单播.组播.广播. 广播通俗地讲,就是让你的机器发送的数据包能够被同一个网络内的全部主机都接收到. 在解说怎样发送广播包之前.先来看看跟广播有关的知识: 我们都知道IP地 ...

  9. 软测试综述——PV操作

     在操作系统中,进程之间常常会存在相互排斥(都须要共享独占性资源时)和同步(完毕异步的两个进程的协作)两种关系.而信号量和PV操作完美有效的处理了这两种情况.     相互排斥:就好比过独木桥,一 ...

  10. SharePoint 2013 配置开发环境，需安装VS2012插件

    原文:SharePoint 2013 配置开发环境,需安装VS2012插件 SharePoint 2013已经安装好了,接下来就是配置开发环境,安装VS2012,但是,装好了以后,发现没有ShareP ...