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），以便能够接收{{1}捏时的事件

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

有没有办法解决这个问题，还是我不肯做其中一个？

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)- try 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（如果捏缩放然后滚动，粉色固定位置框可以离开视口）。
使用CSS html { -ms-touch-action: pan-x pan-y; }禁用捏合缩放，但可以使页面文本变得不可读（取决于设备，配置和页面大小），我看不到{{1会解决这个问题。

Answer 2

请注意，此评论现已过时，最终版本为Windows 8

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

在IE10中检测捏合/缩放而不会阻止默认行为

2 个答案: