帖子：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. shell script 入门 笔记

    shell script 入门 在 shell script 注意必须使用完全相同写在下面: 1.  指令的运行是从上而下.从左而右的分析与运行: 2.  指令的运行就如同第五章内提到的: 指令.选项 ...

  2. 使用shell/python获取hostname/fqdn释疑(转)

    一直以来被Linux的hostname和fqdn(Fully Qualified Domain Name)困惑了好久,今天专门抽时间把它们的使用细节弄清了. 一.设置hostname/fqdn 在Li ...

  3. 大约Java有点感悟---开发商根本上感悟学习

    这些年来一直从事大C.C++,有些局部底.一直想知道更多关于顶级什么. 所以,在工作之余.阅读更多Java哪些方面,还使用了一些建筑结构的一些简单的程序,在这里我想简单谈谈自己的一点感悟. 1.Jav ...

  4. RecyclerView0基于使用

    (转载请注明出处:http://www.kennethyo.me/post/android/recyclerviewchu-ji-shi-yong) RecyclerView是Android在v7包中 ...

  5. Android 应用程序窗口显示状态操作（requestWindowFeature()的应用）

     我们在开发程序是常常会须要软件全屏显示.自己定义标题(使用button等控件)和其它的需求,今天这一讲就是怎样控制Android应用程序的窗口显示. 首先介绍一个重要方法那就是requestWi ...

  6. zoj-3792-Romantic Value-最小割+数值转化

    假设不须要求边的个数的话,就是一个裸的最小割问题. 求边的个数就用边的权值记录一下. #include <stdio.h> #include <iostream> #inclu ...

  7. 【leetcode】Clone Graph（python)

    类似于二叉树的三种遍历,我们能够基于遍历的模板做非常多额外的事情,图的两种遍历,深度和广度模板相同也能够做非常多额外的事情,这里举例利用深度优先遍历的模板来进行复制,深度优先中,我们先訪问第一个结点, ...

  8. C文件IO

    ANSI C标准差点儿被全部的操作系统支持,ANSI C标准提供了完好的I/O函数,使用这些I/O操作我们能够控制程序的输入输出.读写系统磁盘文件.本文记录了用户进程I/O缓冲介绍.文件的读写.文件定 ...

  9. 微信消息体签名及加解密功能详细解析以及.net实现

    原文:微信消息体签名及加解密功能详细解析以及.net实现 前言 微信消息体签名及加密功能已上线,明文传输确实存在安全风险,鉴于微信的用户范围使用之广泛,必定会成为众矢之的.所以大家还是尽快接入安全模式 ...

  10. Android FM学习中的模块 FM启动过程

    最近的研究FM模,FM是一家值我正在学习模块.什么可以从上层中可以看出. 上层是FM按钮的操作和界面显示,因此调用到FM来实现广播收听的功能. 看看Fm启动流程:例如以下图: 先进入FMRadio.j ...