zoukankan      html  css  js  c++  java
  • 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/

  • 相关阅读:
    Linux常用命令大全
    YUM仓库服务
    Keepalived 双机热备
    VML
    CSS3选择器一
    lambda表达式详解
    将博客搬至CSDN
    html5本地数据库(一)
    疯狂的表单-html5新增表单元素和属性
    值类型与引用类型总结
  • 原文地址:https://www.cnblogs.com/qiongmiaoer/p/3192697.html
Copyright © 2011-2022 走看看