帖子：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. 【原版的】PHP技术成长规划过程中猿人

    PHP程序猿的技术成长规划 作者:黑夜路人(2014/10/15) 依照了解的非常多PHP/LNMP程序猿的发展轨迹.结合个人经验体会,抽象出非常多程序猿对未来的迷漫,特别对技术学习的盲目和慌乱.简单 ...

  2. Swift和C#的基本语法对比

    Recently, Apple announced and released a beta version of the new Swift programming language for buil ...

  3. 玩转Web之JavaScript(三)-----javaScript语法总结（三） 窗口/滚动条/文本的相关语法

    JS语法集锦(三) 窗口/滚动条/文本 alert("文本")    警告框:警告框经常用于确保用户可以得到某些信息,当警告框出现后,用户需要点击确定按钮才能继续进行操作. con ...

  4. Nuget的使用

    前言 最近看到园子上有关于NuGet (读音:new get)的使用,所以心血来潮也跟着学习做了一下,觉得很流b哦.于是也就记一下自己的学习心得(并非一味的重复轮子,只是觉得他人做的写的就是对的,自己 ...

  5. 16.怎样自学Struts2之Struts2异常处理[视频]

    16.怎样自学Struts2之Struts2异常处理[视频] 之前写了一篇"打算做一个视频教程探讨怎样自学计算机相关的技术",优酷上传不了,仅仅好传到百度云上: http://pa ...

  6. 使用C#在Windows应用商店程序中获取CPU信息

    using Windows.Devices.Enumeration; string guidStr="{97FADB10-4E33-40AE-359C-8BEF029DBDD0}" ...

  7. vs2010模板修改

     使用visual studio 2010好久了,也遇到了不少问题,下面跟大家分享一些. 模板修改 说明: 主要工具: 以visual studio 2010作为例子,具体目录可能会根据不同的安装目录 ...

  8. Android 在非主线程无法操作UI意识

    Android在应用显示Dialog是一个非常easy事儿,但我从来没有尝试过Service里面展示Dialog. 经验UI操作要在主线程,本地的服务Service是主线程里没错,可是远程servic ...

  9. 如何定义AIDL跨进程间通信

    当进程A要去调用进程B中的service时,并实现通信,我们通常都是通过AIDL来操作的 projectA: 首先在我们自己的包com.wzp.aidlservice中创建一个RemoteServic ...

  10. NSIS：使用FileFunc.nsh头文件判断文件版本

    原文 NSIS:使用FileFunc.nsh头文件判断文件版本 这里,轻狂拿WMP10做一个例子.关于WMP10的原始安装文件,可以下载后通过/C /T:D:\Windows Media Player ...