移動端 觸摸事件和mousedown、mouseup、click事件之間的關系

一、移動端 觸摸事件

ontouchstart、ontouchmove、ontouchend、ontouchcancel

1、Touch事件簡介

pc上的web頁面鼠 标會産生onmousedown、onmouseup、onmouseout、onmouseover、onmousemove的事件，但是在移動終端如iphone、ipod Touch、ipad上的web頁面觸屏時會産生ontouchstart、ontouchmove、ontouchend、ontouchcancel事件，分别對應了觸屏開始、拖拽及完成觸屏事件和取消。

當按下手指時，觸發ontouchstart；

當移動手指時，觸發ontouchmove；

當移走手指時，觸發ontouchend。

當一些更進階别的事件發生的時候（如電話接入或者彈出資訊）會取消目前的touch操作，即觸發ontouchcancel。一般會在ontouchcancel時暫停遊戲、存檔等操作。

2、Touch事件與Mouse事件的出發關系

在觸屏操作後，手指提起的一刹那（即發生ontouchend後），系統會判斷接收到事件的element的内容是否被改變，如果内容被改變，接下來的事 件都不會觸發，如果沒有改變，會按照mousedown，mouseup，click的順序觸發事件。特别需要提到的是，隻有再觸發一個觸屏事件時，才會 觸發上一個事件的mouseout事件。

二、mousedown、mouseup、click事件之間的關系

      點選select标簽元素的時候，會彈出下拉。然而當option中沒有元素時，就不希望彈出下拉（比如在某些浏覽器中，點選select會預設出一個罩層效果，而此時沒有資料選擇的話，彈出比較不友好）。

　　首先想到是利用click事件控制，發現仍然會有下拉出現...實際這個是mousedown事件控制的。

　　這裡就說明下click和mousedown、mouseup。規範要求，隻有在同一個元素上相繼觸發 mousedown 和 mouseup 事件，才會觸發 click 事件；如果 mousedown 或 mouseup 中的一個被取消，就不會觸發 click 事件。

　　這句話也很好了解，有時候我們在浏覽網頁時，滑鼠在一個按鈕或者連結上按下了，但是突然卻又改了主意，此時我們一般會移開滑鼠，在另一個空白處松開滑鼠哈哈~相信這個大家經常上網都有經驗。實際這個就利用了click事件要求在同一個元素相繼觸發mousedown 和 mouseup 事件。

<script type="text/javascript">
    var len = 0;
    $('#sel').mousedown(function(){
        if(len == 0){// 模拟一下select标簽沒資料的标志
            console.log('mousedown');
            return false;
        }
    }).mouseup(function(){
        console.log('mouseup');
    }).click(function(){
        console.log('click');
    });
</script>
           

點選後發現，log的順序是：mousedown-->mouseup-->click

當在mousedown中return false後，就不會彈出下拉或者罩層了...

這裡再介紹下滑鼠的各個事件：

DOM3 級事件中定義了9個滑鼠事件，簡介如下。

click：在使用者單擊主滑鼠按鈕（一般是左邊的按鈕）或者按下Enter鍵時觸發。這一點對確定易通路性很重要，意味着onclick事件處理程式既可以通過鍵盤也可以通過滑鼠執行。

dblclick：在使用者輕按兩下主滑鼠按鈕（一般是左邊的按鈕）時觸發。從技術上說，這個事件并不是DOM2級事件規範中規定的，但鑒于它得到了廣泛支援，是以DOM3 級事件将其納入了标準。

mousedown：在使用者按下了任意滑鼠按鈕時觸發。不能通過鍵盤觸發這個事件。

mouseenter：在滑鼠光标從元素外部首次移動到元素範圍之内時觸發。這個事件不冒泡，而且在光标移動到後代元素上不會觸發。DOM2級事件并沒有定義這個事件，但 DOM3級事件将它納入了規範。IE、Firefox 9+和 Opera支援這個事件。

mouseleave：在位于元素上方的滑鼠光标移動到元素範圍之外時觸發。這個事件不冒泡，而且在光标移動到後代元素上不會觸發。DOM2級事件并沒有定義這個事件，但 DOM3級事件将它 納入了規範。IE、Firefox 9+和 Opera支援這個事件。

mousemove：當滑鼠指針在元素内部移動時重複地觸發。不能通過鍵盤觸發這個事件。

mouseout：在滑鼠指針位于一個元素上方，然後使用者将其移入另一個元素時觸發。又移入的另一個元素可能位于前一個元素的外部，也可能是這個元素的子元素。不能通過鍵盤觸發這個事件。

mouseover：在滑鼠指針位于一個元素外部，然後使用者将其首次移入另一個元素邊界之内時觸 發。不能通過鍵盤觸發這個事件。

mouseup：在使用者釋放滑鼠按鈕時觸發。不能通過鍵盤觸發這個事件。 頁面上的所有元素都支援滑鼠事件。除了 mouseenter 和 mouseleave，所有滑鼠事件都會冒泡， 也可以被取消，而取消滑鼠事件将會影響浏覽器的預設行為。取消滑鼠事件的預設行為還會影響其他事 件，因為滑鼠事件與其他事件是密不可分的關系。

若有不足請多多指教！希望給您帶來幫助！