HammerJs假的多点触摸和showtouches不支持在IE浏览器？

我似乎无法找到一种方法在IE上做假多点触摸工作，目前正在测试10和11.我创建了以下示例，从hammerjs示例页面挑选了代码并稍微调整了一下。HammerJs假的多点触摸和showtouches不支持在IE浏览器？

难道这与IE浏览器的工作？有没有办法来解决这个问题？

2014-03-27 punkbit

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

我已经测试了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>

的头部都必须添加

是锤参考.min.js。

来源

2014-05-08 16:51:59 helmaks

谢谢！在最新版本中，这是固定的，前段时间我在github上得到了他们的回复，如果我没有错的话。此功能以前不可用。 – punkbit

他们一直在大幅改善他们的API，但是这段代码也回答了关于浏览器兼容性的另一个问题。转换问题。如果你认为这是正确的答案，请标记为正确的答案！ – helmaks

HammerJs假的多点触摸和showtouches不支持在IE浏览器？

回答

相关问题