移動端右劃事件與瀏覽器右劃回退衝突解決方案

眾多瀏覽器都有右劃回退預設事件，在某些機型上直接繫結touchstart跟touchend判斷滑動距離即可，但是有些機型（華為Meta7）完全無效。如果在彈出的右側選單需要在右劃時隱藏改選單，可能會出現衝突現象，下面介紹一下如何解決此問題。

程式碼例項如下:

[JavaScript] 純文字檢視 複製程式碼
$('#Box').on("touchstart", function(n) {
  var r = n.touches[0];
  t = r.clientX;
  i = r.clientY;
  stime = new Date().getTime();
  console.log('touchstart');
}).on("touchmove", function(n) {
  var evt = n || window.event;
  if (evt.preventDefault) {
    evt.preventDefault();
  } else {
    evt.returnValue = false;
  }
}).on("touchend touchcancel", function(n) {
  console.log('touchstart');
  var u = n.changedTouches[0],
    f = u.clientX - t,
    e = u.clientY - i;
  f > 50 && Math.abs(e) < 30 && $("#Box").hide();
});

滑動區域繫結touchmove事件，使其不能執行瀏覽器預設操作，之前是在touchstart上靜止的瀏覽器預設事件。