IE 不支持 HammerJs 假多点触控和显示触控？答案

【问题标题】：HammerJs fake multitouch and showtouches not supported on IE?IE 不支持 HammerJs 假多点触控和显示触控？
【发布时间】：2014-03-27 12:10:38
【问题描述】：

我似乎无法找到让假多点触控在 IE 上工作的方法，目前在 10 和 11 上进行测试。我创建了以下示例，从hammerjs 示例页面中挑选了代码并进行了一些调整。

http://jsbin.com/tikimume/3/

这应该适用于 IE 吗？有没有办法解决这个问题？

【问题讨论】：

标签： javascript multi-touch hammer.js

【解决方案1】：

是的，您可以，请参阅下面的代码，它应该允许您的图片被拖动、转换、点击等。多点触控和假手势也应该是可见的。

我已经在 IE 10 AND 11 中测试了下面的代码

代码：

<body id="bodyElement">
    <div id="container">
        <img id="small" src="http://1800recycling.com/wp-content/uploads/2010/06/mona-lisa-lego1.jpg" width="40px" height="40px"/>
            <div id="wrapper">
                <img id="large" src="http://1800recycling.com/wp-content/uploads/2010/06/mona-lisa-lego1.jpg" alt="Colefax Classics" /> 
                <p id="coordinates"></p>
            </div>
    </div>
    <script src="hammer.fakemultitouch.js" type="text/javascript"></script>
    <script src="hammer.showtouches.js" type="text/javascript"></script>
    <script type="text/javascript">

        $(function(ev){

            var isOpen = false;
            var posX, posY,
                lastPosX, lastPosY,
                bufferX, bufferY,
                scale, last_scale, dragReady=0;

            var t;
            var lastX;
            var lastY;
            var elemRect = document.getElementById('large');

            window.requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame ||
                          window.webkitRequestAnimationFrame || window.msRequestAnimationFrame; 

            //displays touch events
            Hammer.plugins.showTouches();
            Hammer.plugins.fakeMultitouch();

            var hammer = Hammer(bodyElement, {
                transform_always_block: true,
                transform_min_scale: 1,
                drag_block_horizontal: true,
                drag_block_vertical: true,
                drag_min_distance: 0,
                preventDefault: true
            }); 

            function SetDefaultImagePosition() {
                posX=0, posY=0,
                lastPosX=0, lastPosY=0,
                bufferX=0, bufferY=0,
                scale=1, last_scale, dragReady=0;
            }                   

            hammer.on('tap touch drag transform transformend dragstart dragend', function(ev) {
                ev.gesture.preventDefault();
                manageMultitouch(ev);
            });     

            function manageMultitouch(ev) {
                switch(ev.type) {
                    case 'tap' :
                        if(isOpen === false) {
                            $('#large').show();
                            isOpen = true;
                        } else {
                            $('#large').hide();
                            isOpen = false;
                        }
                        SetDefaultImagePosition();
                        break;

                    case 'touch' :
                        last_scale = scale;

                        break;

                    case 'drag' :
                        if(t){
                            if (typeof lastX === 'undefined' && typeof lastY === 'undefined'){
                                lastX = 0;
                                lastY = 0;
                            }
                            if(scale > 1) {
                                posX = (ev.gesture.deltaX + lastX * scale)/scale;//This is another workaround for the multiple drag glicth
                                posY = (ev.gesture.deltaY + lastY * scale)/scale;
                            } else {
                                posX = (ev.gesture.deltaX + lastX)/scale;//This is another workaround for the multiple drag glicth
                                posY = (ev.gesture.deltaY + lastY)/scale;
                            }
                        }

                        break;

                    case 'transform' :
                        scale = Math.max(1, Math.min(last_scale * ev.gesture.scale, 3));
                        t=false;
                        break;

                    case 'dragend' :
                        if(t){
                            lastX = posX;
                            lastY = posY;
                        } else {
                            t = true;
                        }   
                        break;
                }

                transform = "scale3d("+scale+","+scale+", 1) " +
                    "translate3d("+posX+"px,"+posY+"px, 0) ";

                requestAnimationFrame(function() {
                    elemRect.style.transform = transform;
                    elemRect.style.oTransform = transform;
                    elemRect.style.msTransform = transform;
                    elemRect.style.mozTransform = transform;
                    elemRect.style.webkitTransform = transform;
                });     
            } 
        });

        </script>
</body>

您只需在头部添加一个对hammer.min.js 的引用。

【讨论】：

谢谢！在最新版本中，这是已修复的，如果我没记错的话，我确实在 github 上收到了他们的回复。以前没有此功能。
他们一直在显着改进他们的 API，但是这段代码也回答了另一个关于浏览器兼容性的问题。转换的问题。如果您认为这是正确答案，请标记为正确答案！