在不阻止默认行为的情况下检测IE10中的缩放

Detecting pinch/zoom in IE10 without preventing default behavior

本文关键字：情况下 检测 缩放 IE10 默认      更新时间：2023-09-26

在Javascript中，我试图检测用户何时收缩，同时允许他们这样做。

var elm = $("#wrapper")[0];
var myGesture = new MSGesture();
myGesture.target = elm;
elm.addEventListener("MSGestureChange", handleGesture);         
elm.addEventListener("MSPointerDown", function (e) {
    myGesture.addPointer(e.pointerId);
});

我要参加MSPointerDown活动。

但据我所知，我需要用-ms-touch-action: none（或pan-y-pan-x）对有问题的元素（#wrapper）进行样式设置，以便能够在收缩时接收MSGestureChange事件。

我不想阻止默认的捏夹行为，那么我的选择是什么？

有办法解决这个问题吗？还是我一直在做这件事？

您可以通过检查几个窗口/文档/屏幕变量的比率来检测缩放更改-请参阅http://jsbin.com/abuzaz/8

通过在窗口onscroll和onresize事件上注册事件来检测缩放更改。如果你担心调整大小或滚动事件"丢失"（可能会发生），那么一个糟糕的解决方案可能是注册一个慢间隔计时器来进行双重检查。

您可以通过查看document.documentElement.offsetHeight与window.innerHeight的比例来检测当前的缩放级别，但这可能是由于错误/怪癖造成的（见下文！）。

您可以通过查看onresize事件中screen.deviceXDPI的更改来检测页面缩放（ctrl++）级别。

为了获得更多乐趣，打开绿色盒子玩一玩http://jsbin.com/otocer/12-先触摸一根手指，然后触摸另一根手指。当第二根手指触摸时，您将获得MSPointerCancel事件。但同时触摸两个，你就不会得到任何事件。

当触摸缩放时，您经常会收到窗口滚动事件，但我不确定您是否可以100%依赖它。似乎在触摸缩放结束时会收到窗口调整事件（但可能并不总是-请参阅http://social.msdn.microsoft.com/Forums/en-US/iewebdevelopment/thread/1065f624-32a8-4c80-8ced-998ba624763e)-尝试http://jsbin.com/otocer/17

请注意，触摸缩放（而不是页面缩放）有一些大错误：

  • 如果缩小缩放后机身尺寸发生变化，则机身滚动条完全错误-请参阅http://jsbin.com/abuzaz/1-或参见http://connect.microsoft.com/IE/feedback/details/779009/ie10-pinch-zoom-doesnt-adjust-scrollable-area-size-after-body-size-is-changed

  • position:fixed是wierd-请参阅http://jsbin.com/iciqaf/1（如果缩放然后滚动，粉红色的固定位置框可以离开视口）。

  • 使用CSS html { -ms-touch-action: pan-x pan-y; }可以禁用缩放，但会使页面文本变小（取决于设备、配置和页面大小），我看不出-ms-viewport会解决这个问题。

请注意，随着Windows 8的最终发布，此注释现已过时

在读取应用您指定的css样式的文档时，-ms-touch-action:none"告诉"浏览器，对于该元素，应用程序应该生成您想要捕获的javascript事件。所以，实际上，我不认为既有蛋糕又吃蛋糕是可能的，要么你得到了JS事件，要么你获得了内置的行为（http://msdn.microsoft.com/en-US/library/ie/hh673557.aspx）。

相关文章：