结果是模拟不了。
页面整体缩放行为是可以通过按住Shift键+页面左键模拟的,但是,实际上,还是一个触摸点,因此无法模拟双指缩放行为。
除非是有触摸板,或者屏幕就是触摸屏。
否则,只能连手机进行调试了。
在触屏设备下,要判断是单指还是多指操作,可以通过 event.touches 数组对象的长度判断。
例如:
document.addEventListener('touchstart', function (event) {
var touches = event.touches;
if (touches.length == 1) {
console.log('单指');
} else if (touches.length >= 2) {
console.log('多指');
}
});
按照我们的理解,上面的逻辑应该是无懈可击的。
实际上并不是。
我一开始也是在 'touchstart' 事件中判断是单指还是双指,结果发现了奇怪的现象,有时候是单指,有时候是双指,双指复现的概率可能不到1成。
这可真是奇怪了。
后来一番测试,终于弄清楚原因了。
只有当两个指头同时触摸屏幕的时候,才能在touchstart事件中被识别为双指操作。
这太难了,没有谁的两个指头是一样长的,很难同一时间戳中屏幕的。
因此,双指事件的判断需要在 touchmove 事件中才行。
代码如下:
document.addEventListener('touchmove', function (event) {
if (event.touches && event.touches.length == 2) {
console.log('双指在移动');
}
});
双指缩放功能的实现的难点就是缩放比例的计算。
event.touches 中的每一项都是触摸点对象,包含了触碰的元素以及触摸点的坐标。
其中,触摸点的坐标就可以用来计算缩放比例。
我们记录下第一次双指行为发生时候的两个手指点的坐标值,于是就可以计算出这两个指头之间的距离;
然后继续 touchmove 的时候,实时计算出新的两个手指的坐标距离。
一开始的距离/现在的距离 = 应该缩放的比例。
如下图所示:
假设页面上有一张图片元素,要实现这种图片的双指缩放预览效果:
<img id="image" src="1.png">
则可以试试使用下面所示的js代码:
var eleImg = document.querySelector('#image');
var store = {
scale: 1
};
// 缩放事件的处理
eleImg.addEventListener('touchstart', function (event) {
var touches = event.touches;
var events = touches[0];
var events2 = touches[1];
event.preventDefault();
// 第一个触摸点的坐标
store.pageX = events.pageX;
store.pageY = events.pageY;
store.moveable = true;
if (events2) {
store.pageX2 = events2.pageX;
store.pageY2 = events2.pageY;
}
store.originScale = store.scale || 1;
});
document.addEventListener('touchmove', function (event) {
if (!store.moveable) {
return;
}
event.preventDefault();
var touches = event.touches;
var events = touches[0];
var events2 = touches[1];
// 双指移动
if (events2) {
// 第2个指头坐标在touchmove时候获取
if (!store.pageX2) {
store.pageX2 = events2.pageX;
}
if (!store.pageY2) {
store.pageY2 = events2.pageY;
}
// 获取坐标之间的举例
var getDistance = function (start, stop) {
return Math.hypot(stop.x - start.x, stop.y - start.y);
};
// 双指缩放比例计算
var zoom = getDistance({
x: events.pageX,
y: events.pageY
}, {
x: events2.pageX,
y: events2.pageY
}) /
getDistance({
x: store.pageX,
y: store.pageY
}, {
x: store.pageX2,
y: store.pageY2
});
// 应用在元素上的缩放比例
var newScale = store.originScale * zoom;
// 最大缩放比例限制
if (newScale > 3) {
newScale = 3;
}
// 记住使用的缩放值
store.scale = newScale;
// 图像应用缩放效果
eleImg.style.transform = 'scale('+ newScale +')';
}
});
document.addEventListener('touchend', function () {
store.moveable = false;
delete store.pageX2;
delete store.pageY2;
});
document.addEventListener('touchcancel', function () {
store.moveable = false;
delete store.pageX2;
delete store.pageY2;
});
demo页面的 touchmove 没有设置 passive:false 也没有报错,是因为 html 标签设置了如下css:
html { touch-action: none; }
简单的说就是设置body的宽度,那么如何动态的获取浏览器减去侧边滚动条之后的宽度,原理就是通过创建一个带有滚动条的div(也就是overflow:scroll)
H5页面禁止手机端缩放是个常见问题了 。meta方式在index.html里面写,对于双击放大和双指放大,本质上是一种js,使用js禁止的方式代码如下
内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!