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

Question

在 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 事件。

我不想阻止默认的收缩行为，那么我有什么选择？

有没有办法解决这个问题，还是我只能做一个或另一个？

Answer 1

您可以通过检查几个窗口/文档/屏幕变量的比率来检测缩放变化 - 参见 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 很奇怪 - 请参阅 http://jsbin.com/iciqaf/1 (如果双指缩放然后滚动，粉色固定位置框可能会离开视口(viewport))。

• 使用 CSS html { -ms-touch-action: pan-x pan-y; } 禁用双指缩放，但会使页面文本小得难以阅读(取决于设备、配置和页面大小)，而且我看不到 -ms-viewport会解决这个问题。