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/