使用IE11的Surface Pro 3上沒有mousewheel事件？

Question

看來，Windows 8.1上的IE11不會從精密觸控板上的多點觸控滾動發送鼠標滾輪事件，就像新Surface Pro 3的類型覆蓋上的滾動事件一樣。是否有一些我可以聽到的替代事件？實際的滾動事件將不起作用，因爲我通過捕獲輸入來模擬畫布應用程序中的滾動區域。

Answer 1

這是一個錯誤。在修復之前，沒有解決辦法。我可以通過Synaptics觸摸板和鼠標滾輪上的雙指滾動來確認它是否正常工作，但不是精確觸摸板（如Surface Type Cover 3或4或Surface Book）。這只是Microsoft Edge & Internet Explorer的一個問題。 Chrome和Firefox都會將精準的觸控板2指滾動與其他任何觸控板的2指滾動完全相同。

Here是下面的代碼來測試的的jsfiddle /驗證：

JS：

(function($) { 
    var $bg = $('.bg'), 
    $log = $('.log'), 
    xPos = 0; 

    // Define wheel event handler: 
    function onWheelEvent(e) { 
    // Prevent default behavior of scrolling the web page: 
    e.preventDefault(); 
    e.stopPropagation(); 

    // Determin the wheel's vertical scroll delta: 
    var wheelDeltaY = 0; 
    if ('deltaY' in e) { 
     if (e.deltaMode === 1) { 
     wheelDeltaY = ((Math.abs(e.deltaY) < 6) ? e.deltaY * -2 : -e.deltaY) * 20; 
     } else { 
     wheelDeltaY = -e.deltaY; 
     } 
    } else if ('wheelDeltaY' in e) { 
     wheelDeltaY = e.wheelDeltaY/120 * 20; 
    } else if ('wheelDelta' in e) { 
     wheelDeltaY = e.wheelDelta/120 * 20; 
    } else if ('detail' in e) { 
     wheelDeltaY = -e.detail/3 * 20; 
    } else { 
     $log.append('<p>unable to determine delta</p>'); 
    } 
    xPos = xPos + Math.round(wheelDeltaY); 
    $bg.css('background-position', xPos + 'px 0px'); 
    $log.append('<p>' + e.type + ' event scrolled by ' + wheelDeltaY + 'px. New X position: ' + xPos + '</p>'); 
    $log.scrollTop($log[0].scrollHeight); 
    }; 
    // Capture wheel events for all browsers 
    // (I'm not using jQuery's event subscription 
    // model to show it's not a jQuery problem): 
    $bg[0].addEventListener('wheel', onWheelEvent, false); 
    $bg[0].addEventListener('mousewheel', onWheelEvent, false); 
    $bg[0].addEventListener('DOMMouseScroll', onWheelEvent, false); 
})($); 

HTML：

<div class="tall"> 
    <!-- Force browser to show scroll bars --> 
    <div class="bg"> 
    <!--BG image we'll move horizontally --> 
    <div class="log"> 
     <!--Contain the event log--> 
     <h3>Scroll with mouse wheel or 2-finger scrolling here</h3> 
     <p> 
     Expected behavior: The background image (which is large and may take a minute to load) should shift horizontally when scrolling over the image, even though the page is tall enough to have a browser-created vertical scrollbar. 
     </p> 
     <p> 
     If you scroll the mouse over this image, and the page scrolls vertically (and this text isn't replaced with an event log), it means the event was not captured. 
     </p> 
    </div> 
    </div> 
</div> 

CSS：

.tall { 
    height: 2000px; 
} 

.bg { 
    width: 100%; 
    height: 300px; 
    background-image: url(http://i.imgur.com/DP6K9D8.gif); 
    background-position: 0px 0px; 
    background-repeat: repeat; 
    background-repeat-x: repeat; 
    background-repeat-y: no-repeat; 
    background-size: contain; 
    position: relative; 
} 

.log { 
    position: absolute; 
    top: 10px; 
    right: 10px; 
    width: 40%; 
    padding: 10px; 
    background-color: rgba(255, 255, 255, 0.85); 
    color: #555; 
    max-height: 260px; 
    overflow: hidden; 
    font-size: 0.7em; 
    font-family: arial, sans-serif; 
}