vue ---- 實現手機端（左滑 刪除。右劃 正常）

標籤：class   pre   bsp   事件   post   body   座標   .com   跟蹤   

 

 

 

 

 

touchstart:  // 手指放到螢幕上的時候觸發 touchmove:  // 手指在螢幕上移動的時候觸發 touchend:  // 手指從螢幕上拿起的時候觸發 touchcancel:  // 系統取消touch事件的時候觸發。至於系統什麼時候會取消，不詳

client / clientY：// 觸摸點相對於瀏覽器視窗viewport的位置 pageX / pageY：// 觸摸點相對於頁面的位置 screenX /screenY：// 觸摸點相對於螢幕的位置 identifier： // touch對象的unique ID

http://blog.sina.com.cn/s/blog_65c2ec5e0101fexw.html處理Touch事件能讓你跟蹤使用者的每一根手指的位置。你可以綁定以下四種Touch事件：    1.touchstart:  // 手指放到螢幕上的時候觸發     2.touchmove:  // 手指在螢幕上移動的時候觸發     3.touchend:  // 手指從螢幕上拿起的時候觸發     4touchcancel:  // 系統取消touch事件的時候觸發。至於系統什麼時候會取消，不詳屬性    1.client / clientY：// 觸摸點相對於瀏覽器視窗viewport的位置     2.pageX / pageY：// 觸摸點相對於頁面的位置     3.screenX /screenY：// 觸摸點相對於螢幕的位置     4.identifier： // touch對象的unique ID //touchstart事件  function touchSatrtFunc(e) {      //evt.preventDefault(); //阻止觸摸時瀏覽器的縮放、捲軸滾動等      var touch = e.touches[0]; //擷取第一個觸點      var x = Number(touch.pageX); //頁面觸點X座標      var y = Number(touch.pageY); //頁面觸點Y座標      //記錄觸點初始位置      startX = x;      startY = y;  }  //touchmove事件 function touchMoveFunc(e) {      //evt.preventDefault(); //阻止觸摸時瀏覽器的縮放、捲軸滾動等      var touch = evt.touches[0]; //擷取第一個觸點      var x = Number(touch.pageX); //頁面觸點X座標      var y = Number(touch.pageY); //頁面觸點Y座標      var text = ‘TouchMove事件觸發：（‘ + x + ‘, ‘ + y + ‘）‘;      //判斷滑動方向      if (x - startX != 0) {          //左右滑動      }      if (y - startY != 0) {          //上下滑動      }  }  

 

vue ---- 實現手機端（左滑 刪除。右劃 正常）