檢測捏/變焦而不會阻止默認行爲

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（粉色固定位置可盒如果捏縮放然後滾動則離開視口）。

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

Answer 2

注意到這一評論是現在與Windows 8

的最終版本已經過時在閱讀文檔應用您指定-ms-touch-action:none css樣式是什麼告訴瀏覽器，對於該元素，應用程序應該產生你想要捕捉的javascript事件。所以，實際上，我不認爲有可能讓你的蛋糕也吃掉它，無論是獲得JS活動，還是獲得內置行爲（http://msdn.microsoft.com/en-US/library/ie/hh673557.aspx）。