Javascript 刷卡显示错误的一面

我想添加滑动动作（左、右、上、下）并显示方向滑动警报

代码：

var touchtstartcoords={'x'：-1，'y'：-1}，///mousedown或touchtstart事件上的x和y坐标。
touchEndCoords={'x'：-1，'y'：-1}，//鼠标或touchend事件上的x和y坐标。
方向='未定义'，//滑动方向
minDistanceXAxis=10，//鼠标上的最小距离移动或触摸X轴上的移动
maxDistanceYAxis=10，//鼠标移动上的最大距离或Y轴上的触摸移动
maxAllowedTime=1000，//开关启动和开关启动之间允许的最大时间
startTime=0，//开关启动时的时间
elapsedTime=0，//swipeStart和Swipended之间经过的时间
targetElement=document.getElementById（'el'）；//要委派的元素
函数swipeStart（e）{
e=e？e:window.event；
e=（'changedTouches'在e中）？e.changedTouches[0]：e；
touchStartCoords={'x'：e.pageX，'y'：e.pageY}；
startTime=新日期（）.getTime（）；
targetElement.textContent=“”；
}
功能开关移动（e）{
e=e？e:window.event；
e、 预防默认值（）；
}
功能开关（e）{
e=e？e:window.event；
e=（'changedTouches'在e中）？e.changedTouches[0]：e；
touchEndCoords={'x'：e.pageX-touchtstartcoords.x，'y'：e.pageY-touchtstartcoords.y}；
elapsedTime=new Date（）.getTime（）-startTime；
如果（elapsedTime=mindestancexaxis&&Math.abs（touchEndCoords.y）=mindestancexaxis&&Math.abs（touchEndCoords.y）0）？“顶部”：“底部”；
开关（方向2）{
案例“顶部”：
警报（“顶部”）；
document.getElementById（“el”）.innerHTML=“”；
打破
案例“底部”：
警报（“底部”）；
document.getElementById（“el”）.innerHTML=“”；
打破
}
}
}
}
函数添加多个侦听器（el、s、fn）{
var evts=s.分割（“”）；
对于（var i=0，iLen=evts.length；i这是我用于检测刷卡的代码：


如果您想将其特定于某个元素而不是整个文档，则例如

var el = document.getElementById('myID');

el.addEventListener('touchstart', handleTouchStart, false);
el.addEventListener('touchmove', handleTouchMove, false);

这是一份完整的文件

document.addEventListener('touchstart', handleTouchStart, false);
document.addEventListener('touchmove', handleTouchMove, false);

var xDown = null;
var yDown = null;

function handleTouchStart(evt) {
  xDown = evt.touches[0].clientX;
  yDown = evt.touches[0].clientY;
};

function handleTouchMove(evt) {
  if (!xDown || !yDown) {
    return;
  }

  var xUp = evt.touches[0].clientX;
  var yUp = evt.touches[0].clientY;

  var xDiff = xDown - xUp;
  var yDiff = yDown - yUp;

  if (Math.abs(xDiff) > Math.abs(yDiff)) { /*most significant*/
    if (xDiff > 0) {
      /* left */
      alert('left');
    } else {
      /* right */
      alert('right');
    }
  } else {
    if (yDiff > 0) {
      /* up */
      alert('up');
    } else {
      /* down */
      alert('down');
    }
  }
  /* reset values */
  xDown = null;
  yDown = null;
};

这是我用来检测刷卡的代码：


如果您想将其特定于某个元素而不是整个文档，则例如

var el = document.getElementById('myID');

el.addEventListener('touchstart', handleTouchStart, false);
el.addEventListener('touchmove', handleTouchMove, false);

这是一份完整的文件

document.addEventListener('touchstart', handleTouchStart, false);
document.addEventListener('touchmove', handleTouchMove, false);

var xDown = null;
var yDown = null;

function handleTouchStart(evt) {
  xDown = evt.touches[0].clientX;
  yDown = evt.touches[0].clientY;
};

function handleTouchMove(evt) {
  if (!xDown || !yDown) {
    return;
  }

  var xUp = evt.touches[0].clientX;
  var yUp = evt.touches[0].clientY;

  var xDiff = xDown - xUp;
  var yDiff = yDown - yUp;

  if (Math.abs(xDiff) > Math.abs(yDiff)) { /*most significant*/
    if (xDiff > 0) {
      /* left */
      alert('left');
    } else {
      /* right */
      alert('right');
    }
  } else {
    if (yDiff > 0) {
      /* up */
      alert('up');
    } else {
      /* down */
      alert('down');
    }
  }
  /* reset values */
  xDown = null;
  yDown = null;
};

查看顶部/底部与左侧/右侧检查的
if
子句；它是相同的：

if (Math.abs(touchEndCoords.x) >= minDistanceXAxis && Math.abs(touchEndCoords.y) <= maxDistanceYAxis){
    // Process left/right case...
}
...
if (Math.abs(touchEndCoords.x) >= minDistanceXAxis && Math.abs(touchEndCoords.y) <= maxDistanceYAxis){
    // Process top/bottom case...
}

查看顶部/底部与左侧/右侧检查的
if
子句；它是相同的：

if (Math.abs(touchEndCoords.x) >= minDistanceXAxis && Math.abs(touchEndCoords.y) <= maxDistanceYAxis){
    // Process left/right case...
}
...
if (Math.abs(touchEndCoords.x) >= minDistanceXAxis && Math.abs(touchEndCoords.y) <= maxDistanceYAxis){
    // Process top/bottom case...
}

当我将它们分开时：它们执行与prev相同的操作。不，它们不需要分开…您有两次相同的条件检查，但期望相互排斥的结果（不可能）。我将编辑答案以使其更清楚…当我将它们分开时：它们执行与prev相同的操作。不，它们不需要分开…您有两次相同的条件检查，但期望得到相互排斥的结果（不可能）。我将编辑答案以使其更清楚…欢迎，很高兴它有帮助！欢迎，很高兴它有帮助！