移动端双指缩放事件(原生)，e.originalEvent.touches

69 阅读 0 评论 46 点赞

我是靠谱客的博主健壮大树，最近开发中收集的这篇文章主要介绍移动端双指缩放事件(原生)，e.originalEvent.touches，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>双指缩放事件</title>
</head>
<body>
<div class="full-bgimg">

</div>
<script>
var pageX, pageY, initX, initY, isTouch = false;
var start = [];
$(".full-bgimg").on("touchstart",function(e){
// alert("touchstart")
//手指按下时的手指所在的X，Y坐标
pageX = e.originalEvent.touches[0].pageX;
pageY = e.originalEvent.touches[0].pageY;
//初始位置的X，Y 坐标
initX = e.target.offsetLeft;
initY = e.target.offsetTop;
//记录初始一组数据作为缩放使用
if (e.originalEvent.touches.length >= 2) { //判断是否有两个点在屏幕上
start = e.originalEvent.touches; //得到第一组两个点
};
//表示手指已按下
// isTouch = true;
});
$(".full-bgimg").on("touchmove",function(e){
e.preventDefault();
// 一根手指执行目标元素移动操作
if (e.originalEvent.touches.length == 1 && isTouch) {};

// 2 根手指执行目标元素放大操作
if (e.originalEvent.touches.length >= 2 && isTouch) {
// alert("2")
//得到第二组两个点
var now = e.originalEvent.touches;
Math.abs(e.originalEvent.touches[0].pageX-e.originalEvent.touches[1].pageX)
//当前距离变小， getDistance 是勾股定理的一个方法
if(getDistance(now[0], now[1]) < getDistance(start[0], start[1])){

};
};
})

$(".full-bgimg").on("touchend",function(e){
//将 isTouch 修改为false 表示手指已经离开屏幕
// if (isTouch) {isTouch = false;}
});
//缩放勾股定理方法-求两点之间的距离
function getDistance(p1, p2) {
var x = p2.pageX - p1.pageX,
y = p2.pageY - p1.pageY;
return Math.sqrt((x * x) + (y * y));
};
</script>
</body>
</html>