javascript对点击事件和拖动事件的区分
原创
1.项目中，为了更好的服务用户，经常会设计一个便捷的通道，这个通道一般都是“悬浮”的。
由于是悬浮的，那么就会考虑用户会出现哪几种可能的操作，一个是直接点击，另外一种就是在屏幕上先拖动几下，然后再点击。
那么为了完美的实现这个需求，那么该怎么办呢？
最重要的就是要区分点击事件和拖动事件。
我们都知道，点击事件是被点击的对象可看做是静止不动的，而拖动事件的对象很明显是移动的。
那么思路就应该是先判断事件对象是否有移动的现象，
但是由于不管是在点击事件和拖动事件，其都有一个鼠标按下的一个过程和一个松开的过程，只不过拖动事件多了一个拖动动作。
那么完整的思路应是这样的：
第一：先写出鼠标按下的函数；
第二：编写对象是否被拖动的函数；
第三：判断对象是否相对原先位置产生了位移；
第四：编写鼠标松开之后的代码；
完整代码如下：
var timmerHandle = null; //先设置一个定时器处理；
var isDrag = false; //声明拖动的默认状态是：否
//创建目标被点击（鼠标按下）的函数
function entranceDivDown (){
console.log("mouse down.");
isDrag = false;
//延迟100ms
timmerHandle = setTimeout(setDragTrue,200);
}
function setDragTrue (){
isDrag = true;
}
//创建目标被拖动的函数
function entranceDivMove (){
//可以使用isDrag来判断是移动还是拖动
var entrance = document.getElementById("entrance");
entrance.onmousedown = function(ev){
var oevent = ev || event;
var distanceX = oevent.clientX - entrance.offsetLeft;
var distanceY = oevent.clientY - entrance.offsetTop;
document.onmousemove = function(ev){
var oevent = ev || event;
entrance.style.left = oevent.clientX - distanceX + 'px';
entrance.style.top = oevent.clientY - distanceY + 'px';
};
document.onmouseup = function(ev){
document.onmousemove = null;
document.onmouseup = null;
};
};
}
//创建目标鼠标释放的函数
function entranceDivUp (){
if (!isDrag){
//先把doMouseDownTimmer清除，不然200毫秒后setGragTrue方法还是会被调用的
clearTimeout(timmerHandle);
console.log("mouse up.");
activity_id = sessionStorage.getItem('activity_id'); //获取活动id
var url = globalConfig.pre_api_url + "/wall/index.php?activity_id=" + activity_id; //活动路径
window.open(url);
}else{
isDrag = false;
console.log("draging over.");
}
}
这里推荐一下我的前端学习交流群：731771211 ，里面都是学习前端的，如果你想制作酷炫的网页，想学习知识。自己整理了一份2018最全面前端学习资料，从最基础的HTML+CSS+JS到移动端HTML5到各种框架都有整理，送给每一位前端小伙伴，这里是小白聚集地，欢迎初学和进阶中的小伙伴！原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
评论
登录后参与评论
推荐阅读
腾讯云开发者
