mousedown\mouseup\click事件关系

 定义

当鼠标指针移动到元素上方,并按下鼠标按键时,会发生 mousedown 事件。

与 click 事件不同,mousedown 事件仅需要按键被按下,而不需要松开即可发生。

mousedown() 方法触发 mousedown 事件,或规定当发生 mousedown 事件时运行的函数。

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事件,效果是不影响罢了。  

   

            原文参考链接:http://www.cnblogs.com/qiongmiaoer/p/3192697.html

                                     http://www.w3school.com.cn/jquery/event_mousedown.asp

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