一、移動(dòng)端 觸摸事件

ontouchstart、ontouchmove、ontouchend、ontouchcancel

1、Touch事件簡介

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

總結(jié)

以上就是這篇文章的全部內(nèi)容了，希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，謝謝大家對VEVB武林網(wǎng)的支持。