一、移動端 觸摸事件

ontouchstart、ontouchmove、ontouchend、ontouchcancel

1、Touch事件簡介

pc上的web頁面鼠 標(biāo)會產(chǎn)生onmousedown、onmouseup、onmouseout、onmouseover、onmousemove的事件，但是在移動終端如iphone、ipod Touch、ipad上的web頁面觸屏?xí)r會產(chǎn)生ontouchstart、ontouchmove、ontouchend、ontouchcancel事件，分別對應(yīng)了觸屏開始、拖拽及完成觸屏事件和取消。

• 當(dāng)按下手指時，觸發(fā)ontouchstart；
• 當(dāng)移動手指時，觸發(fā)ontouchmove；
• 當(dāng)移走手指時，觸發(fā)ontouchend。
• 當(dāng)一些更高級別的事件發(fā)生的時候（如電話接入或者彈出信息）會取消當(dāng)前的touch操作，即觸發(fā)ontouchcancel。一般會在ontouchcancel時暫停游戲、存檔等操作。

2、Touch事件與Mouse事件的出發(fā)關(guān)系

在觸屏操作后，手指提起的一剎那（即發(fā)生ontouchend后），系統(tǒng)會判斷接收到事件的element的內(nèi)容是否被改變，如果內(nèi)容被改變，接下來的事 件都不會觸發(fā)，如果沒有改變，會按照mousedown，mouseup，click的順序觸發(fā)事件。特別需要提到的是，只有再觸發(fā)一個觸屏事件時，才會 觸發(fā)上一個事件的mouseout事件。

二、mousedown、mouseup、click事件之間的關(guān)系

點擊select標(biāo)簽元素的時候，會彈出下拉。然而當(dāng)option中沒有元素時，就不希望彈出下拉（比如在某些瀏覽器中，點擊select會默認(rèn)出一個罩層效果，而此時沒有數(shù)據(jù)選擇的話，彈出比較不友好）。

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

這里就說明下click和mousedown、mouseup。規(guī)范要求，只有在同一個元素上相繼觸發(fā) mousedown 和 mouseup 事件，才會觸發(fā) click 事件；如果 mousedown 或 mouseup 中的一個被取消，就不會觸發(fā) click 事件。

這句話也很好理解，有時候我們在瀏覽網(wǎng)頁時，鼠標(biāo)在一個按鈕或者鏈接上按下了，但是突然卻又改了主意，此時我們一般會移開鼠標(biāo)，在另一個空白處松開鼠標(biāo)哈哈~相信這個大家經(jīng)常上網(wǎng)都有經(jīng)驗。實際這個就利用了click事件要求在同一個元素相繼觸發(fā)mousedown 和 mouseup 事件。

<script type="text/javascript">
  var len = 0;
  $('#sel').mousedown(function(){
    if(len == 0){// 模擬一下select標(biāo)簽沒數(shù)據(jù)的標(biāo)志
      console.log('mousedown');
      return false;
    }
  }).mouseup(function(){
    console.log('mouseup');
  }).click(function(){
    console.log('click');
  });
</script>

點擊后發(fā)現(xiàn)，log的順序是：mousedown-->mouseup-->click

當(dāng)在mousedown中return false后，就不會彈出下拉或者罩層了...

這里再介紹下鼠標(biāo)的各個事件：

DOM3 級事件中定義了9個鼠標(biāo)事件，簡介如下。

click：在用戶單擊主鼠標(biāo)按鈕（一般是左邊的按鈕）或者按下回車鍵時觸發(fā)。這一點對確保易訪問性很重要，意味著onclick事件處理程序既可以通過鍵盤也可以通過鼠標(biāo)執(zhí)行。

dblclick：在用戶雙擊主鼠標(biāo)按鈕（一般是左邊的按鈕）時觸發(fā)。從技術(shù)上說，這個事件并不是DOM2級事件規(guī)范中規(guī)定的，但鑒于它得到了廣泛支持，所以DOM3 級事件將其納入了標(biāo)準(zhǔn)。

mousedown：在用戶按下了任意鼠標(biāo)按鈕時觸發(fā)。不能通過鍵盤觸發(fā)這個事件。

mouseenter：在鼠標(biāo)光標(biāo)從元素外部首次移動到元素范圍之內(nèi)時觸發(fā)。這個事件不冒泡，而且在光標(biāo)移動到后代元素上不會觸發(fā)。DOM2級事件并沒有定義這個事件，但 DOM3級事件將它納入了規(guī)范。IE、Firefox 9+和 Opera支持這個事件。

mouseleave：在位于元素上方的鼠標(biāo)光標(biāo)移動到元素范圍之外時觸發(fā)。這個事件不冒泡，而且在光標(biāo)移動到后代元素上不會觸發(fā)。DOM2級事件并沒有定義這個事件，但 DOM3級事件將它 納入了規(guī)范。IE、Firefox 9+和 Opera支持這個事件。

mousemove：當(dāng)鼠標(biāo)指針在元素內(nèi)部移動時重復(fù)地觸發(fā)。不能通過鍵盤觸發(fā)這個事件。

mouseout：在鼠標(biāo)指針位于一個元素上方，然后用戶將其移入另一個元素時觸發(fā)。又移入的另一個元素可能位于前一個元素的外部，也可能是這個元素的子元素。不能通過鍵盤觸發(fā)這個事件。

mouseover：在鼠標(biāo)指針位于一個元素外部，然后用戶將其首次移入另一個元素邊界之內(nèi)時觸 發(fā)。不能通過鍵盤觸發(fā)這個事件。

mouseup：在用戶釋放鼠標(biāo)按鈕時觸發(fā)。不能通過鍵盤觸發(fā)這個事件。 頁面上的所有元素都支持鼠標(biāo)事件。除了 mouseenter 和 mouseleave，所有鼠標(biāo)事件都會冒泡， 也可以被取消，而取消鼠標(biāo)事件將會影響瀏覽器的默認(rèn)行為。取消鼠標(biāo)事件的默認(rèn)行為還會影響其他事 件，因為鼠標(biāo)事件與其他事件是密不可分的關(guān)系。

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

總結(jié)

以上就是這篇文章的全部內(nèi)容了，希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，謝謝大家對腳本之家的支持。如果你想了解更多相關(guān)內(nèi)容請查看下面相關(guān)鏈接

最新評論