JS怎样将拖拉事件与点击事件分离？
帖子：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
原位置点击：
mouse.html:20
mouse.html:22
mouse.html:25
mouse.html:27
mouse.html:15
拖动点击：
mouse.html:20
mouse.html:22
mouse.html:25
mouse.html:27
mouse.html:15
上面能够发现，拖动点击的mousedown后移动，mouseup与click事件鼠标坐标发生变化，且一样。
故而，能够推断鼠标的坐标来区分是拖动点击还是原地点击~
当然这个是个土的办法，假设有更好的请回复~
JS怎样将拖拉事件与点击事件分离？的更多相关文章
- (网页)HTML5 Canvas ( 事件交互, 点击事件为例 ) isPointInPath(转)
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- HTML5 Canvas ( 事件交互, 点击事件为例 ) isPointInPath
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- [前端][自定义DOM事件]不使用setTimeout实现双击事件或n击事件
使用setTimeout实现双击事件 例如,这样: let div = document.getElementById("div"); doubleClick(div, funct ...
- WebView 实现JS效果和a标签的点击事件
目前很多android app都可以显示web页面的界面,嵌入式开发,这个界面一般都是WebView这个控件加载出来的,学习该控件可以为你的app开发提升扩展性. 先说下WebView的一些优点: 可 ...
- 防止多次引入js文件导致的重复注册点击事件
前端代码中的js文件如果是动态引入的或者是某个事件操作进行注册的,那么重复的引入js文件或者多次触发注册事件会导致事件多次进行注册,造成不必要的麻烦,所以需要在每次注册之前将先前的事件进行取消,下面以 ...
- Android长按事件和点击事件问题处理，OnItemLongClickListener和OnItemClickListener冲突问题
今天在做demo时,须要设置ListView的item的长按和点击事件.OnItemLongClickListener和OnItemClickListener,然而点击事件能够实现,可是在长按操作时会 ...
- Android长按事件和点击事件 冲突问题
长按点击的时候默认会触发点击事件,android系统是优先点击的,并且没有返回值:而长按事件是有返回值的,如果返回false,两个事件都会有响应,如果返回true则只响应长按事件.
- threejs Object的点击(鼠标)事件(获取点击事件的object)
objects=[]; raycaster = new THREE.Raycaster(); mouse = new THREE.Vector2(); //监听全局点击事件,通过ray检测选中哪一个o ...
- input中blur失去焦点事件与点击事件冲突时如何解决
方法一 使用setTimeout $(function(){ $(".cy-name-input input").on({ focus:function() { $(". ...
随机推荐
- HDU 3715 Go Deeper（2-sat）
HDU 3715 Go Deeper 题目链接 题意:依据题意那个函数,构造x数组.问最大能递归层数 思路:转化为2-sat问题,因为x仅仅能是0.1,c仅仅能是0,1.2那么问题就好办了,对于0, ...
- web即时通讯2--基于Spring websocket达到web聊天室
如本文所用,Spring4和websocket要构建web聊天室,根据框架SpringMVC+Spring+Hibernate的Maven项目,后台使用spring websocket进行消息转发和聊 ...
- DWR入门实例(二)
DWR(Direct Web Remoting) DWR is a Java library that enables Java on the server and JavaScript in a b ...
- java 它 引用（基本类型的包装，构造函数和析构函数c++不同）
一个:java 和c++参考控制 他提到引用,我们会想到java它不喜欢c++里面的指针.当然java内引用和c++里面的引用是不同的. 比如: 比方C++中,我对某一个函数的声明.int a(i ...
- c# webbrowser 获取用户选中文字
原文:c# webbrowser 获取用户选中文字 最近一直被一个问题困扰,有一个文本框,一个webbrowser控件,一个上下文菜单, webbrowser 获取用户选中文字" tit ...
- 汉高澳大利亚sinox2014电影播放flash最好的办法是安装游戏windows文本firefox
事实上,韩澳sinox本身是没有原生flashplayer,无论怎么捣鼓,它们是从adobe弄linux要么windows版本号flashplayer,它不停地拨弄linux版本号flashplaye ...
- 在sd卡，创建目录和文件
在本文中,sd卡的情况下创建的文件和目录,介绍如何创建目录和文件的重点. 1. 路径问题(以下的样例是在Java中測试的,在Android中相同适用) 1.1 假设须要在目录中创建文件的目录存在,直接 ...
- zoj2977Strange Billboard (国家压缩+罗列)
Strange Billboard Time Limit: 2 Seconds Memory Limit: 65536 KB The marketing and public-relations de ...
- nginx做反向负载均衡，后端服务器获取真实客户端ip（转）
首先,在前端nginx上需要做如下配置: location / proxy_set_hearder host $host; proxy_set_header X-forw ...
- dp related problems (update continuously)
Leetcode Maximum Product Subarray 这个问题是说给一个整数数组.求最大连续子阵列产品. 纠结了包括阵列中的很长一段时间0而如何处理负数,关键的事实是,负治疗,所以我们录 ...