一、移動端 觸摸事件

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：在用戶單擊主鼠標按鈕（一般是左邊的按鈕）或者按下回車鍵時觸發。這一點對確保易訪問性很重要，意味著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，所有鼠標事件都會冒泡， 也可以被取消，而取消鼠標事件將會影響瀏覽器的默認行為。取消鼠標事件的默認行為還會影響其他事 件，因為鼠標事件與其他事件是密不可分的關系。

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

總結

以上就是這篇文章的全部內容了，希望本文的內容對大家的學習或者工作具有一定的參考學習價值，謝謝大家對VEVB武林網的支持。