帖子：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. github jekyll site不再使用Maruku由于Markdown翻译员,但kramdown

    今天写了一篇博客,之push至jekyll site on github在,发现总是错的,例如,下面的电子邮件消息: The page build completed successfully, bu ...

  2. implements KeyListener但关键监听器监听少

    今天写的游戏.主要听众,但它并不总是加入了育雏, 我实现了接口,但不听 后来,我发现只是没想到服用口服细致怎么称呼控制panel上面增加了一个addKeyListener(this); 基础不坚固.马 ...

  3. myeclipse中间classpath

    myeclipse中间classpath这是一个非常重要的问题 myeclipse是搜索寻找在按照时间其,和myeclipse有一个特殊的文件来保存classpath信息.这也是别人的项目文件的副本时 ...

  4. js 性能优化整理之 惰性载入

    跨检查浏览器特性,解决不同浏览器的兼容问题. 例如,我们最常见的为 dom 节点添加事件的函数 function addEvent(element,type,handler){ if(element. ...

  5. RestServer 1.1发布

    具体配置方法参照第一版:http://www.cnblogs.com/devgis/p/4947191.html BUG反馈 QQ:80163278 邮箱:devgis@qq.com 淘宝:http: ...

  6. jquery ：操作iframe

    原文 jquery :操作iframe 1. 内容里有两个ifame <iframe id="leftiframe"...</iframe> <iframe ...

  7. iOS UISearchDisplayController学习笔记

    UISearchDisplayController和UISearchBar一起使用用来管理UISearchBar和搜索结果的展示.UISearchDisplayController提供了显示搜索结果的 ...

  8. 阿里云ECSserver部署django

    highlight=uwsgi%20django">參考 server安装的是Centos 系统. uwsgi是使用pip安装的. nginx是使用yum install nginx安 ...

  9. ANDROID PAD版本号 PHONE版本号 源代码有什么 差别?

    ANDROID PAD版本号 PHONE版本号 源代码有什么 差别? 直接把frameworks/base/core/res/res/values/config.xml里面的<bool name ...

  10. 很酷的CSS3仿Facebook登录表单

    原文:很酷的CSS3仿Facebook登录表单 今天看到一款很不错的CSS3登录表单,外观是仿Facebook的登录表单,还挺不错的,另外也支持简单的表单输入框验证.下图是表单的效果图: 我们也可以在 ...