您的位置：首页 > Web前端 > JavaScript

touch.js

2016-07-13 19:25 686 查看

<!DOCTYPE html>
<html>

<head>
<meta
charset="UTF-8">
<title></title>
<meta
name="viewport"
content="width=device-width, initial-scale=1.0,
maximum-scale=1.0, user-scalable=0">
<style
type="text/css">
.wrap
{
width:
100px;
height:
100px;
background-color: deeppink;
position:
absolute;
}
</style>
</head>

<body>
<div
class="wrap">

</div>
<script
type="text/javascript">
/* 触摸事件
三种基本触摸事件：
1. touchstart: 手指放在一个DOM元素上。
2.touchmove: 手指拖拽一个DOM元素。
3. youchend: 手指从一个DOM元素上移开。
每个触摸事件都会产生touches数组：
touches：当前位于屏幕上的所有手指的一个列表。我们做的是单指触摸的例子，所以直接用touches[0] */

// touch触摸事件
var
wrap = document.querySelector(".wrap");

// 原生触屏事件
wrap.addEventListener("touchstart",
function() {
// 获取手指对象 touches数组，保存触摸屏幕的手指
var
finger = event.touches[0];
// 先取得手指的位置坐标
// var x1 = finger.pageX;
// var y1 = finger.pageY;

// clientX/clientY: 触摸点相对于浏览器窗口viewport的位置
// pageX/pageY：触摸点相对于页面的位置
// screenX/screenY: 触摸点相对于屏幕的位置
var
x1 = finger.clientX;
var
y1 = finger.clientY;

// 保存小div的初始位置
var
l = wrap.offsetLeft;
var
t = wrap.offsetTop;

wrap.addEventListener("touchmove",
function() {
var
f2 = event.touches[0];

// 新的手指位置
var
x2 = f2.pageX;
var
y2 = f2.pageY;

wrap.style.left
= l + x2 -
x1 + "px";
wrap.style.top
= t + y2 -
y1 + "px";
})

wrap.addEventListener("touchend",
function() {
// 消除事件
// wrap.removeEventListener("touchmove");
})

})

</script>
</body>

</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： touch

相关文章推荐

新的分享

章节导航