在前端开发工作中，会遇到这样问题：针对同一个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）方法的更多相关文章

  1. javascript中onclick事件能调用多个方法吗

    Q: javascript中onclick事件能调用多个方法吗? A: 可以的,方法如下onclick="aa();bb();cc();"每个方法用“;”分号隔开就行了

  2. JavaScript的 onclick 事件是如何调用jquery 方法的

    看见个不错的问答,关于JavaScript的 onclick 事件是如何调用jquery 方法的,特此标注,链接如下:http://segmentfault.com/q/101000000033350 ...

  3. click事件和mousedown、mouseup事件

    点击select标签元素的时候,会弹出下拉.然而当option中没有元素时,就不希望弹出下拉(比如在某些浏览器中,点击select会默认出一个罩层效果,而此时没有数据选择的话,弹出比较不友好). 首先 ...

  4. 网页中，鼠标点击与javascript的click事件怎么区分处理

    就下面问题发现另一个方式: js代码: <script> //IE if(document.all) { document.getElementById("clickme&quo ...

  5. JavaScript 触发click事件 兼容FireFox，IE 和 Chrome

    解决了火狐下无法触发click事件的问题 <script language="javascript"> function test2(name) { if(docume ...

  6. 处理移动端click事件300ms延迟的好方法—FastClick

    下载地址:https://github.com/ftlabs/fastclick 1.click事件为什么有延迟? “...mobile browsers will wait approximatel ...

  7. 分享一个移动项目中消除click事件点击延迟的方法

    对于前端工程师来说,apicloud无疑给我们提供了很好的平台,有各种各样的模块供我们使用,但是在实际项目的时候,很大部分的代码,还是需要我们用html css js来实现的.但是呢,移动端页面对于c ...

  8. mousedown、mouseup、click事件之间的关系及执行顺序

      三个事件的触发时机 mousedown 当鼠标指针移动到元素上方,并按下鼠标按键(左.右键均可)时,会发生 mousedown 事件.与 click 事件不同,mousedown 事件仅需要按键被 ...

  9. 区分拖曳(drag)和点击(click)事件

    假设页面上有一个a标签: <a href="http://www.google.com">google</a> 现在需要对这个标签进行拖放操作,会发现当拖曳 ...

随机推荐

  1. LINQ系列：LINQ to XML查询

    1. 读取XML文件 XDocument和XElement类都提供了导入XML文件的Load()方法,可以读取XML文件的内容,并转换为XDocument或XElement类的实例. 示例XML文件: ...

  2. SQL Server游标

    什么是游标 结果集,结果集就是select查询之后返回的所有行数据的集合. 游标则是处理结果集的一种机制吧,它可以定位到结果集中的某一行,多数据进行读写,也可以移动游标定位到你所需要的行中进行操作数据 ...

  3. iOS之Core Data及其线程安全

    一.简介 Core Data是iOS5之后才出现的一个框架,它提供了对象-关系映射(ORM)的功能,即能够将OC对象转化成数据,保存在SQLite数据库文件中,也能够将保存在数据库中的数据还原成OC对 ...

  4. 深入理解DOM节点类型第七篇——文档节点DOCUMENT

    × 目录 [1]特征 [2]快捷访问 [3]文档写入 前面的话 文档节点document,隶属于表示浏览器的window对象,它表示网页页面,又被称为根节点.本文将详细介绍文档节点document的内 ...

  5. 谈谈基于OAuth 2.0的第三方认证 [中篇]

    虽然我们在<上篇>分别讨论了4种预定义的Authorization Grant类型以及它们各自的适用场景的获取Access Token的方式,我想很多之前没有接触过OAuth 2.0的读者 ...

  6. Cocos2d-Lua （练手） 微信打飞机

    学习下lua,目前入门级,使用版本为 v3.3 Final For Win,空闲时间不足,只能断断续续写点东西.   一.子弹效果          子弹只做了一种,扇形发射,可以增加扇形大小,子弹的 ...

  7. hibernate笔记--通过SchemaExport生成数据库表

    方法比较简单,项目中只需要两个java类(一个实体类,如User,一个工具类),两个配置文件(hibernate必须的两个配置文件hibernate.cfg.xml,与User.hbm.xml),即可 ...

  8. 微信小程序小技巧系列《一》幻灯片，tab导航切换

    作者:gou-tian 来自:github 幻灯片 使用微信小程序原生组件swiper实现. <swiper indicator-dots="{{indicatorDots}}&quo ...

  9. Ajax提交参数的值中带有html标签不能提交成功的解决办法（ASP.NET）

    最近在公司做资源及文章上传功能遇到一个小问题,被坑了好半天. 该功能就类似利用富文本编辑器发布信息,但是用Ajax提交数据,因此提交参数值中不可避免的含有html标签. 在本地运行代码一直没问题,总是 ...

  10. 【大结局】《从案例中学习JavaScript》之酷炫音乐播放器（四）

    这是之前写的用H5制作的音乐播放器,前三节其实已经做得差不多了,音轨的制作原理已经在上一节说明,不过一直还没有和音乐对接. 本章作为该系列的一个完结篇,我会专门把动态音轨的实现代码贴出来,demo地址 ...