javascript - 滑动显示错误的一面

Question

我想添加滑动 Action (左、右、上、下)并显示有关方向滑动的警报。

代码:

var touchStartCoords =  {'x':-1, 'y':-1}, // X and Y coordinates on mousedown or touchstart events.
    touchEndCoords = {'x':-1, 'y':-1},// X and Y coordinates on mouseup or touchend events.
    direction = 'undefined',// Swipe direction
    minDistanceXAxis = 10,// Min distance on mousemove or touchmove on the X axis
    maxDistanceYAxis = 10,// Max distance on mousemove or touchmove on the Y axis
    maxAllowedTime = 1000,// Max allowed time between swipeStart and swipeEnd
    startTime = 0,// Time on swipeStart
    elapsedTime = 0,// Elapsed time between swipeStart and swipeEnd
    targetElement = document.getElementById('el');// Element to delegate

function swipeStart(e) {
  e = e ? e : window.event;
  e = ('changedTouches' in e)?e.changedTouches[0] : e;
  touchStartCoords = {'x':e.pageX, 'y':e.pageY};
  startTime = new Date().getTime();
  targetElement.textContent = " ";
}

function swipeMove(e){
  e = e ? e : window.event;
  e.preventDefault();
}

function swipeEnd(e) {
  e = e ? e : window.event;
  e = ('changedTouches' in e)?e.changedTouches[0] : e;

  touchEndCoords = {'x':e.pageX - touchStartCoords.x, 'y':e.pageY - touchStartCoords.y};

  elapsedTime = new Date().getTime() - startTime;

  if (elapsedTime <= maxAllowedTime){
    if (Math.abs(touchEndCoords.x) >= minDistanceXAxis && Math.abs(touchEndCoords.y) <= maxDistanceYAxis){
      
      direction = (touchEndCoords.x < 0 )? 'left' : 'right';

      switch(direction){
        case 'left':
          alert("left");
          document.getElementById("el").innerHTML="<img src = http://www.worthwild.com/assets/img-mas-02-73410a2b7c925f01866e68f4651510a0.jpg>";
          break;
        case 'right':
          alert("right");
          document.getElementById("el").innerHTML="<img src = http://www.worthwild.com/assets/img-mas-02-73410a2b7c925f01866e68f4651510a0.jpg>";
          break;
      }

      
    }

    if (Math.abs(touchEndCoords.x) >= minDistanceXAxis && Math.abs(touchEndCoords.y) <= maxDistanceYAxis){
      
      direction2 = (touchEndCoords.y > 0 )? 'top' : 'bottom';

      switch(direction2){
        case 'top':
          alert("top");
          document.getElementById("el").innerHTML="<img src = http://www.worthwild.com/assets/img-mas-02-73410a2b7c925f01866e68f4651510a0.jpg>";
          break;
        case 'bottom':
          alert("bottom");
         document.getElementById("el").innerHTML="<img src = http://www.worthwild.com/assets/img-mas-02-73410a2b7c925f01866e68f4651510a0.jpg>";
          break;
      }

      
    }

  }

}

function addMultipleListeners(el, s, fn) {
  var evts = s.split(' ');
  for (var i=0, iLen=evts.length; i<iLen; i++) {
    el.addEventListener(evts[i], fn, false);
  }
}

addMultipleListeners(targetElement, 'mousedown touchstart', swipeStart);
addMultipleListeners(targetElement, 'mousemove touchmove', swipeMove);
addMultipleListeners(targetElement, 'mouseup touchend', swipeEnd);

@import url(http://fonts.googleapis.com/css?family=Open+Sans:300,400,600);
@import url(http://weloveiconfonts.com/api/?family=fontawesome);
[class*="fontawesome-"]:before {
  font-family: 'FontAwesome', sans-serif;
}

*, *:before, *:after {
  box-sizing: border-box;
}

a {
  text-decoration: none;
  color: #333;
}

body {
    margin-top: -22px;
    margin-bottom: 0px;
    margin-right: 0px;
    margin-left: 0px;
}

#container {
  width: 360px;
  height: 640px;
  background-color: #ff5a5a;
}

.square-box{
    margin: 0 auto;
    position: relative;
    width: 60%;
    height: 15%;
    overflow: hidden;
    background: #4679BD;
    top: 50px;
}
.square-box:before{
    content: "";
    display: block;
    padding-top: 100%;
}
.square-content{
    position:  absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    color: white;
}
.square-content div {
   display: table;
   width: 100%;
   height: 100%;
}
.square-content span {
    display: table-cell;
    text-align: center;
    text-transform: uppercase;
    vertical-align: middle;
    font-size: 20px;
    font-weight: bold;
    color: white;
    font-family: 'Lato', sans-serif;
}

.button-panel
{    
    display: table;
    margin: 0 auto;
    width: 60%;
    
}

.buttonlogin{
    margin-top: 30%;
    display: block;
    background: #27adf1;
    color: white;
    border: none;
    width: 100%;
    height: 50px;
}

.button {
    margin-top: 40%;
    background: #27adf1;
    color: white;
    border: none;
    width: 100%;
    height: 50px;
}

.button2 {
    margin-top: .25em;
    border: 1px solid #27adf1;
    color: #27adf1;
    background: white;
    width: 100%;
    height: 50px;
}

#status{
    margin: 0 auto;
    width: 216px;
    height: 50px;
    color: #27adf1;
    margin-top: 4.25em;
    display: block;
    background: white;
}

h1, p {
  text-align: center;
}

#el {
  margin: auto;
  position: relative;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 250px;
  height: 250px;
  line-height: 250px;
  text-align: center;
}

#el img{
  margin: auto;
  height: 250px;
  height: 250px;
  line-height: 250px;
  text-align: center;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">

		<div class="main">

		    <div class="button-panel">
		        <button class="backbutton" 
		        style="margin-top: 15%;
			    display: block;
			    background: #27adf1;
			    color: white;
			    border: none;
			    width: 100%;
			    height: 50px;"
		        onclick="window.location.href='index.html'">Back to Menu</button>
		    </div>

		</div>

		<div id="wrapper">

		    <div id="el">
			    <script type="text/javascript">
			    	document.write("<img src = http://www.worthwild.com/assets/img-mas-02-73410a2b7c925f01866e68f4651510a0.jpg>");
			    </script>
		    </div>

	  	</div>

	</div>

问题是上下方向。有左右方向提示...

但我想把它们分开。

当我向左滑动时，只得到关于左边的提醒。

当我向右滑动时，只得到关于右边的提醒。

顶部和底部相同...

这段代码有什么问题？

Answer 1

这是我用来检测滑动的代码:

Here's a fiddle showing it in action (switch to mobile in dev mode)

如果你想让这个特定于一个元素而不是整个文档，那么例如

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;
};