mousedown\mouseup\click事件关系

 

背景分析：

如果用户在一个元素上点击，那么最少三个事件会被触发，事件发生顺序：

1、mousedown,当用户在这个元素上按下鼠标键的时候

2、mouseup，当用户在这个元素上松开鼠标键的时候

3、click，当一个mousedown和一个mouseup都在这个元素上被检测到的时候发生

 

工作需求：

　　在地图上通过鼠标点击添加marker，拖拽地图后，避免点击事件的进入，即拖拽不添加marker。

　　分析：如果希望拖拽动作后，不触发点击事件，单纯帮顶click事件是不行的，可以使用mousedown、mousemove、mouseup来描述拖拽和鼠标点击事件。

　　mousedown-mousemove-mouseup，为拖拽事件；mousedown-mouseup，为点击事件。

　　于是问题细化成，通过flag判断是不是进行了move操作，一旦进行则mouseup中的函数体不执行即可，示意代码如下：

       map.addEventListener("mousedown", function () {
            ifDrag = true;
        })
        map.addEventListener("mousemove", function () {
            ifDrag = false;
        })
        map.addEventListener("mouseup", function (type, evt) {
            //判断是否有拖拽动作
            if (ifDrag) {
                //add marker
                showMarkerData(evt.mouseGeoPoint);
            }
            else {
                 //no maker
            }
        })  　　　　

　　但是，这并不意味着click方法没有触发，如果给map也监听click方法，会发现click在up后也是会触发的，只不过我们不对它执行任何操作，而只使用mouse事件，效果是不影响罢了。　　

　　map.addEventListener("click",function(type,evt){
　　　　//click
　　})

 

------------------------------------------------

　　博主经营一家发饰淘宝店，都是纯手工制作哦，开业冲钻，只为信誉！需要的亲们可以光顾一下！谢谢大家的支持！
店名：
　　小鱼尼莫手工饰品店
经营:
　　发饰、头花、发夹、耳环等（手工制作）
网店：
　　http://shop117066935.taobao.com/

  ---------------------------------------------------------------------

继续正题... 

 　 

参考网页：

　　http://tech.cncms.com/sheji/js/41804.html

　　http://bbs.9ria.com/thread-140336-1-1.html

　　http://www.cnblogs.com/webflash/archive/2010/01/05/1639306.html（当三个事件作用于同一个标签节点element时，尝试使用setTimeout时间函数来区分）

 店名：
　　小鱼尼莫手工饰品店
经营:
　　发饰、头花、发夹、耳环等（手工制作）
网店：
　　http://shop117066935.taobao.com/