mousedownmouseupclick事件关系

背景分析:

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

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/

原文地址:https://www.cnblogs.com/qiongmiaoer/p/3192697.html