移動端 touch事件

admin發表於2019-04-28
事件

當前移動裝置，絕大多數沒有滑鼠或者鍵盤，即便有鍵盤，也是通過點選文字框等輸入域彈出的虛擬鍵盤。

所以絕大多數用於PC端的事件在移動端不再有效，或者不再是最佳選擇。

例如click事件就不推薦在移動端使用，具體參閱touch事件與click事件區別一章節。

一.移動端觸屏事件：

下面列舉一下得到瀏覽器廣泛支援和應用的觸屏事件：

（1）.touchstart事件：當在螢幕上按下手指時觸發。

（2）.touchmove事件：當在螢幕上連續的滑動手指時觸發。

（3）.touchend事件：當手指在螢幕上抬起，或者滑出螢幕時觸發。

二.註冊事件處理函式：

與PC端註冊事件處理函式完全一樣，具體參閱JavaScript 註冊事件處理函式一章節。

程式碼例項如下：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no" />
 <style>
#ant {
  width: 100%;
  height: 300px;
  text-align:center;
  line-height:300px;
  background-color:green;
}
</style>
<script>
window.onload = function () {
  let odiv = document.getElementById("ant");
  odiv.addEventListener("touchstart", showMsg);
  function showMsg() {
    odiv.innerHTML = "螞蟻部落";
  }
}
</script>
</head>
<body>
<div id="ant">點選螢幕檢視資料</div>
</body>
</html>

在谷歌開發者工具，移動端模擬介面，進行觸屏操作可以觸發touchstart事件。

三.事件物件：

與PC端相同，當事件觸發的時候，可以為事件處理函式傳遞事件物件。

程式碼例項如下：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no" />
 <style>
#ant {
  width: 100%;
  height: 300px;
  text-align:center;
  line-height:300px;
  background-color:green;
}
</style>
<script>
window.onload = function () {
  let odiv = document.getElementById("ant");
  odiv.addEventListener("touchstart", showMsg);
  function showMsg(ev) {
    odiv.innerHTML = ev.type;
  }
}
</script>
</head>
<body>
<div id="ant">點選螢幕檢視資料</div>
</body>
</html>

為時間處理函式傳遞事件物件ev，然後在div中寫入當前事件型別。

事件物件中包含與當前觸發事件相關的資訊，可以通過以下程式碼在控制檯列印觀察：

[JavaScript] 純文字檢視 複製程式碼
window.onload = function () {
  let odiv = document.getElementById("ant");
  odiv.addEventListener("touchstart", showMsg);
  function showMsg(ev) {
    console.log(ev);
  }
}

a:3:{s:3:\"pic\";s:43:\"portal/201904/28/085848ui308viei00g39ef.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

移動端事件物件內容與PC端事件物件內容很多重複，含義也基本一致，不多做介紹。

幾個特別重要屬性的使用可以參閱touches、targetTouches與changedTouches一章節。

相關文章