JavaScript区分click事件和mousedown（mouseup、mousemove）方法
在前端开发工作中，会遇到这样问题：针对同一个dom元素，即希望为它绑定click事件，又想该元素可以允许拖拽的效果。而使用拖拽的效果，我们一般就会用到mousedown,mousemove和mouseup事件。但mousedown、mouseup就会和click事件发生冲突。我们希望在拖拽元素的时候不希望它执行click方法，在执行click方法是不希望执行mousedown和mouseup方法。
比如如下代码，就会出现上面的问题：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script src="js/jquery-1.11.2.js"></script>
<script>
$(function(){
$("#mydiv").on("click",function(){
console.log("this is click event");
});
$("#mydiv").on("mousedown",function(){
console.log("this is mousedown event");
});
$("#mydiv").on("mouseup",function(){
console.log("this is mouseup event");
}); });
</script>
</head>
<body>
<div id="mydiv" style="width:200px;height:200px;background: red;">
</div>
</body>
</html>
上述代码在控制台的输出结果如下：
this is mousedown event
this is mouseup event
this is click event
可以看到，mousedown 和mouseup是优先于click事件先执行的。
而我们希望的效果是，在移动元素的操作中不执行click事件，在执行click事件时不调用mousedown和mouseup方法。
区分click事件和鼠标拖拽元素后在松开事件其实很简单，用一个全局标识符就可以了。
我们不用在为元素绑定click事件，而是只使用它的mousedown,mousemove,mouseup事件来判断是否该元素被拖拽了。
具体参见代码，可以看注释：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script src="js/jquery-1.11.2.js"></script>
<script>
$(function(){
var hasMove=false; //全局标识，初始化标识元素没有发生mousemove
$("#mydiv").on("mousedown",function(){
hasMove=false;
});
$("#mydiv").on("mouseup",function(){
//根据是否发生移动状态来模拟click事件和拖拽后释放鼠标事件
if(hasMove){
console.log("移动后鼠标松开事件");
}else{
console.log("没有移动鼠标松开事件,模拟click");
}
hasMove=false; //还原标识，以便下一次使用
});
$("#mydiv").on("mousemove",function(){
hasMove=true; //元素移动事件中跟新标识为true，表示有发生移动
});
}); </script>
</head>
<body>
<div id="mydiv" style="width:200px;height:200px;background: red;">
</div>
</body>
</html>
效果和控制台如图
如此，放弃使用click事件机制，以mousemove事件和mouseup事件动态改变全局标识符，来区分在鼠标释放一刻元素是否发生移动，以此来判断该事件是click还是拖拽。
感谢阅读。
JavaScript区分click事件和mousedown（mouseup、mousemove）方法的更多相关文章
- javascript中onclick事件能调用多个方法吗
Q: javascript中onclick事件能调用多个方法吗? A: 可以的,方法如下onclick="aa();bb();cc();"每个方法用“;”分号隔开就行了
- JavaScript的 onclick 事件是如何调用jquery 方法的
看见个不错的问答,关于JavaScript的 onclick 事件是如何调用jquery 方法的,特此标注,链接如下:http://segmentfault.com/q/101000000033350 ...
- click事件和mousedown、mouseup事件
点击select标签元素的时候,会弹出下拉.然而当option中没有元素时,就不希望弹出下拉(比如在某些浏览器中,点击select会默认出一个罩层效果,而此时没有数据选择的话,弹出比较不友好). 首先 ...
- 网页中，鼠标点击与javascript的click事件怎么区分处理
就下面问题发现另一个方式: js代码: <script> //IE if(document.all) { document.getElementById("clickme&quo ...
- JavaScript 触发click事件 兼容FireFox，IE 和 Chrome
解决了火狐下无法触发click事件的问题 <script language="javascript"> function test2(name) { if(docume ...
- 处理移动端click事件300ms延迟的好方法—FastClick
下载地址:https://github.com/ftlabs/fastclick 1.click事件为什么有延迟? “...mobile browsers will wait approximatel ...
- 分享一个移动项目中消除click事件点击延迟的方法
对于前端工程师来说,apicloud无疑给我们提供了很好的平台,有各种各样的模块供我们使用,但是在实际项目的时候,很大部分的代码,还是需要我们用html css js来实现的.但是呢,移动端页面对于c ...
- mousedown、mouseup、click事件之间的关系及执行顺序
三个事件的触发时机 mousedown 当鼠标指针移动到元素上方,并按下鼠标按键(左.右键均可)时,会发生 mousedown 事件.与 click 事件不同,mousedown 事件仅需要按键被 ...
- 区分拖曳(drag)和点击(click)事件
假设页面上有一个a标签: <a href="http://www.google.com">google</a> 现在需要对这个标签进行拖放操作,会发现当拖曳 ...
随机推荐
- 使用未付费的账号真机调试 iOS 程序，过几天后程序一打开就会闪退
使用未付费的苹果开发者账号真机调试 iOS 程序,过几天后程序一打开就会闪退. 解决办法: 删除 Provisioning Profile,重新配置一次. 终极解决办法:花钱购买苹果开发者账号. ...
- Autocomplete 自动补全（Webform实战篇）
开篇语 因为项目中需要用到一个自动补全的功能,功能描述: 需求一:新增收件人的时候,自动下拉显示出数据库中所有的收件人信息(显示的信息包括:姓名-收件地址-联系方式) 需求二:选中一个值得时候,分别赋 ...
- Android入门(二十二)解析JSON
原文链接:http://www.orlion.ga/687/ 解析JSON的方式有很多,主要有官方提供的 JSONObject,谷歌的开源库 GSON.另外,一些第三方的开源库如 Jackson.Fa ...
- 深入理解定位父级offsetParent及偏移大小
前面的话 偏移量(offset dimension)是javascript中的一个重要的概念.涉及到偏移量的主要是offsetLeft.offsetTop.offsetHeight.offsetWid ...
- 【开源】OSharp3.3框架解说系列：开发计划与进度
OSharp是什么? OSharp是个快速开发框架,但不是一个大而全的包罗万象的框架,严格的说,OSharp中什么都没有实现.与其他大而全的框架最大的不同点,就是OSharp只做抽象封装,不做实现.依 ...
- Android随笔之——按键长按事件onKeyLongPress
现在安卓手机实体键是越来越少了,但还是有的,恰好自己就碰上了:按键的长按事件...百度了一些博客,内容都基本上是完全一样的,虽然可以捕获到长按事件,但却会和正常的单击冲突.幸好最近开个VPN,goog ...
- Windows 使用 Yeoman generators 创建 ASP.NET 应用程序
上一篇:<Windows 搭建 .NET 跨平台环境并运行应用程序> 阅读目录: Install Node.js Install yeoman-generators Create ASP. ...
- spring控制并发数的工具类ConcurrencyThrottleSupport和ConcurrencyThrottleInterceptor
官方文档: /** * Support class for throttling concurrent access to a specific resource. * * <p>Desi ...
- 微软消息分析器（Microsoft Message Analyzer ）更新至1.2版-2015-1-20
就在刚才,收到了微软Connect的邮件推送,大名鼎鼎的微软消息分析器更新至1.2版,并且有公众下载链接,大家可以在这里进行下载. 这里简单摘录一下博客里面提到的新版所增加的功能与功能的改进方面. G ...
- 记一次由于Java泛型类型擦除而导致的问题，及解决办法
中所周知,Java中的泛型并不像C++.C#一样是真正的泛型,其泛型是通过类型擦除来实现的.具体什么是类型擦除,可以参看这篇博文:http://icyfenix.iteye.com/blog/1021 ...