移動端判斷觸屏位置程式碼例項

admin發表於2017-02-23
分享一段程式碼例項，它能夠實現判斷移動端觸屏位置的功能。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0"/>
<meta name="format-detection" content="telephone=no" />
<title>螞蟻部落</title>
<style type="text/css">
div{
  margin:20px 0;
  font-size: 18px;
}
#container{
  width:100%;
  height:420px;
background-color: #1AC78C;
}
</style>
</head>
<body>
<div>
  <h3>觸控開始</h3>
  <p>觸控方向為：<span id="direction"></span></p>
</div>
<div id="container"></div>
<script type="text/javascript">
var container = document.getElementById("container");
var direction = document.getElementById("direction");
var start_x;
var start_y;
var end_x;
var end_y;
container.addEventListener("touchstart", function(event) {
  if (event.targetTouches.length == 1) {
    var touch = event.targetTouches[0];
    start_x = touch.pageX;
    start_y = touch.pageY;
  };
});
container.addEventListener("touchmove", function(event) {
  event.preventDefault();
  if (event.targetTouches.length == 1) {
    var touch = event.targetTouches[0];
    move_x = touch.pageX;
    move_y = touch.pageY;
  };
});
container.addEventListener("touchend", function(event) {
  if (event.changedTouches.length == 1) {
    var touch = event.changedTouches[0];
    end_x = touch.pageX;
    end_y = touch.pageY;
  };
  var directionMsg = "";
  var numRange = 20;
  if (start_x - end_x > numRange) {
    directionMsg += "左";
  } else if (start_x - end_x < -numRange) {
    directionMsg += "右";
  }
 
  if (start_y - end_y > numRange) {
    directionMsg += "上";
  } else if (start_y - end_y < -numRange) {
    directionMsg += "下";
  }
  direction.innerHTML = directionMsg;
});
</script>
</body>
</html>

特別說明:需要在移動端，或者模擬移動端環境下測試，否則無效果。


相關文章