Question

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

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

Answer 1

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

我在IE 10和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的引用。

IE上不支持HammerJs假多点触控和showtouches？

1 个答案: