在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時能夠接收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-犯規調整滾動的區域大小-后身體尺寸被改變的

• position:fixed很奇怪 - 請參閱http://jsbin.com/iciqaf/1 （如果捏縮放然后滾動，粉色固定位置框可以離開視口）。

• 使用CSS html { -ms-touch-action: pan-x pan-y; } html { -ms-touch-action: pan-x pan-y; }禁用捏到變焦，但可以使頁面文本unreadably小（取決於設備，配置和頁面大小），我看不出-ms-viewport會解決這個問題。

Answer 2

請注意，此評論現已在Windows 8的最終版本中過時

在閱讀應用css樣式的doc時，你已經指定了-ms-touch-action:none告訴瀏覽器對於該元素，應用程序應該生成你想要捕獲的javascript事件。 所以，實際上，我不相信你可以吃蛋糕也可以吃它，或者你得到JS事件，或者你得到內置行為（ http://msdn.microsoft.com/en-US/ library / ie / hh673557.aspx ）。