IE10 上全屏滑块的 -ms-touch-action 问题答案

【问题标题】：-ms-touch-action issue with full screen slider on IE10IE10 上全屏滑块的 -ms-touch-action 问题
【发布时间】：2015-08-12 23:17:32
【问题描述】：

您好，我制作了一个全屏滑块，我面临的问题是因为它是全屏的，我无法用手指在屏幕上滚动，所以使用 IE10 或 11 的触摸设备不能能够向下滚动。

在 CSS 中，您必须将 -ms-touch-action 启用为 none 以禁用控件上的所有触摸事件，以便 javascript 触摸操作可以工作。所以我可以左右滑动动画，但是当我向下移动页面时它不会滚动，因为滑块占据了整个屏幕，它有 -ms-touch-action: none - 所以有没有可以启用在我的情况下触摸滚动。

CSS：

.slider {       
    -ms-touch-action: none;
    position: relative;
    background: pink;
}

jQuery:

var touchStart = window.navigator.msPointerEnabled ? "MSPointerDown" : "touchstart",
var touchMove  = window.navigator.msPointerEnabled ? "MSPointerMove" : "touchmove",
var touchEnd   = window.navigator.msPointerEnabled ? "MSPointerUp"   : "touchend";              


_this.$elem.on(touchStart + ' ' + touchEnd + ' ' + 'mousedown mouseup', function(event) {

    if( $(event.target || event.srcElement).hasClass('btn-next') || 
        $(event.target || event.srcElement).hasClass('btn-prev') ||
        $(event.target || event.srcElement).parent().hasClass('.slider-nav')) return;

    var diff,
        e = event.originalEvent;

    //event.stopPropagation(); 
    //event.preventDefault();

    //_this.$elem.addClass('enable-touch');

    if(!isAnimating) {
        switch(event.type) {
            case 'touchstart' :
                //console.log('touchstart');
                startX = e.touches[0].pageX;                            

            case 'touchend' :
                //console.log('touchend');
                endX = e.changedTouches[0].pageX;
                break;
            case 'MSPointerDown' :
                // console.log('MSPointerDown');
                startX = e.pageX;                       

            case 'MSPointerUp' :
                //console.log('MSPointerUp');
                endX = e.pageX; 

                break;
            case 'mousedown' :                      
                //console.log('not dragged');
                    isDragging = false;                             
                    $(window).mousemove(function() {
                        isDragging = true;
                        console.log('is dragging x=' + e.pageX);
                        startX = e.pageX;                                   
                        $(window).unbind("mousemove");
                    });
                break;
            case 'mouseup' :
                //console.log('dragged x=' + e.pageX);
                var wasDragging = isDragging;
                isDragging = false;
                $(window).unbind("mousemove");                          
                if (wasDragging) {  
                    wasDragging = false;
                    isDragging = false;                     
                    endX = e.pageX;
                }
                break;                  
        }

        diff = Math.abs(startX - endX);

        if(startX != undefined && startX > endX && diff > 100) {                        
            _this.slide('left');    
            startX = 0;
            endX   = 0; 
            //_this.$elem.removeClass('enable-touch');

        } else if(startX != undefined && startX < endX && diff > 100) {                     
            _this.slide('right');
            startX = 0;
            endX   = 0; 
            //_this.$elem.removeClass('enable-touch');              
        }
    }
});

【问题讨论】：

我最终不得不使用第三方插件github.com/davetayls/jquery.kinetic 这解决了我的问题

标签： javascript jquery html css

【解决方案1】：

我认为你需要使用：

.slider {       
    -ms-touch-action: pan-y;
    touch-action: pan-y;
    position: relative;
    background: pink;
}

这开启了泛 y 事件传播的能力（您可能还需要双击和其他一些操作）。您只想从触摸操作中删除 pan-x 并将其余部分保持不变。

你也需要不带前缀的触摸动作，因为带前缀的版本在 IE11 中已被弃用（我认为在 IE Edge 中已删除）。

如果没有正确的触摸动作，您将立即收到一个pointerdown 事件，然后是一个pointercancel 事件。

【讨论】：