在不阻止默认行为的情况下检测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 事件。

但据我所知，为了在收缩时接收到 MSGestureChange 事件，我需要使用 -ms-touch-action:none （或 pan-y pan-x）样式来设置相应的元素 (#wrapper)。

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

有没有其他办法，或者我必须选择其中之一？

- Sir Code-A-Lot

---

你的函数 handleGesture 中有类似于 return false; 的语句吗？通常事件应该被冒泡... - OlafW

Answer 1

您可以通过检查一些窗口/文档/屏幕变量的比率来检测缩放更改-请参见http://jsbin.com/abuzaz/8 通过在窗口上注册事件onscroll和onresize来检测缩放更改。如果您担心调整大小或滚动事件会“丢失”（这可能会发生），则一个丑陋的解决方案可能是还要注册一个慢速间隔计时器进行双重检查。

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

您可以通过查看screen.deviceXDPI在onresize事件中的更改来检测页面缩放（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

请注意，触摸缩放（而不是页面缩放）存在一些严重的错误：

• 如果在缩放后更改了body大小，则body滚动条完全错误-请参见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（如果进行了捏合缩放然后滚动，粉色固定位置框可能会超出视口）。

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

- robocat

---

只是想补充一下，在IE10上，调整大小事件会在捏合缩放（放大和缩小）时触发，这会导致动态显示的固定定位层（如您所说）在百分比设置尺寸时出现问题 - 即模态窗口在捏合缩放时消失。您上面的工作帮助我解决了这个问题，通过添加调整大小事件侦听器和状态跟踪变量，基本上可以在捏合缩放时重新显示模态窗口。 - Strixy

Answer 2

注意：随着Windows 8的最终发布，此评论已经过时。

阅读文档后，应用您指定的CSS样式-ms-touch-action:none会告诉浏览器对于该元素，应用程序应产生您想要捕获的JavaScript事件。因此，实际上，我认为无法两全其美，您要么获取JS事件，要么获取内置行为（http://msdn.microsoft.com/en-US/library/ie/hh673557.aspx）。

- adam

---

你错了。第一个链接http://jsbin.com/abuzaz/8展示了检测捏合缩放和缩放（并且它没有-ms-touch-action:none）。http://jsbin.com/otocer/12链接是展示-ms-touch-action:none和捏合缩放之间交互的（你似乎同意存在问题）。另外，你说的是对我的回答的评论，而不是一个回答本身，糟糕。我花了很长时间来编写和验证我的答案，如果你在发布前花些时间验证你的担忧，我会非常感激。 - robocat

Robcat--我很高兴他们在Windows 8的正式发布中终于解决了这个问题。当时提问和我回答时，IE 10和Windows 8并不是你正在使用的版本... - adam

似乎这仍然是事实。https://connect.microsoft.com/IE/feedback/details/767646/ms-touch-action-does-not-allow-a-way-to-programmatically-prevent-default-touch-behavior 上的答案表明，没有通过JS编程方式阻止默认行为的方法，只能通过touch-action来实现。 - natevw