背景分析:
如果用户在一个元素上点击,那么最少三个事件会被触发,事件发生顺序:
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/