鼠标事件触摸事件的iPad兼容性

我有这个孩子画应用程序，它使用鼠标事件在图像上绘画。不过，我需要转换鼠标事件来触摸，以便它可以在ipad上工作。请有人解释我如何做到这一点。我的应用程序代码与此示例代码http://cool-php-tutorials.blogspot.co.uk/2011/05/simple-html5-drawing-app-with-saving.html非常相似。鼠标事件触摸事件的iPad兼容性

P.S我关于JavaScript的知识是不是在一个先进水平，所以请你能不能告诉我的工作代码或例子将是一个很大的帮助

我的代码，做鼠标事件如下。请从鼠标转换此功能触摸..请我从现在2天卡住..：|

var clickX = new Array(); 
var clickY = new Array(); 
var clickDrag = new Array(); 

// binding events to the canvas 
$('#drawingCanvas').mousedown(function(e){ 
    var mouseX = e.pageX - this.offsetLeft; 
    var mouseY = e.pageY - this.offsetTop; 

    paint = true; // start painting 
    addClick(e.pageX - this.offsetLeft, e.pageY - this.offsetTop); 

    // always call redraw 
    redraw(); 
}); 

$('#drawingCanvas').mousemove(function(e){ 
    if(paint){ 
    addClick(e.pageX - this.offsetLeft, e.pageY - this.offsetTop, true); 
    redraw(); 
    } 
}); 

// when mouse is released, stop painting, clear the arrays with dots 
$('#drawingCanvas').mouseup(function(e){ 
    paint = false; 

    clickX = new Array(); 
    clickY = new Array(); 
    clickDrag = new Array(); 
}); 

// stop painting when dragged out of the canvas 
$('#drawARobot').mouseleave(function(e){ 
    paint = false; 
}); 


// The function pushes to the three dot arrays 
function addClick(x, y, dragging) 
{ 
    clickX.push(x); 
    clickY.push(y); 
    clickDrag.push(dragging); 
} 



// this is where actual drawing happens 
// we add dots to the canvas 


function redraw(){ 

    for(var i=0; i < clickX.length; i++) 
    { 
    context.beginPath(); 
    if(clickDrag[i] && i){ 
     context.moveTo(clickX[i-1], clickY[i-1]); 
    }else{ 
     context.moveTo(clickX[i]-1, clickY[i]); 
    } 
    context.lineTo(clickX[i], clickY[i]); 
    context.closePath(); 
    context.stroke(); 
    } 
}

来源

2013-07-12 Ash

请参阅http://stackoverflow.com/questions/1517924/javascript-mapping-touch-events-to-mouse-events –

你可以这样映射它：

$('#drawingCanvas').bind("mousedown touchstart", function(e){ 

$('#drawingCanvas').bind("mousemove touchmove", function(e){ 

$('#drawingCanvas').bind("mouseup touchend", function(e){

，如果需要比微调的代码。

来源

2013-07-12 11:18:25 Niels

感谢...我终于有了工作 – Ash

用鼠标和触摸事件的问题是，他们没有相同的API，

，这样你们就需要标准化的API有两个鼠标和触摸输入。

有一些解决方案在那里，如：

http://eightmedia.github.io/hammer.js/

和锤代码是非常容易使用：

var hamme = $("#myCanvas").hammer(); 

hammer.on("touch", function(e){  
    e.gesture.center.pageX; 
    // .. 
}); 

hammer.on("drag", function(e){ 
    e.gesture.center.pageX 
    //.. 
})

来源

2013-07-12 11:19:49 winthers

试试这个：

注意：你需要jQuery库。

touchmouse.js

(function() { 

    /* == GLOBAL DECLERATIONS == */ 
    TouchMouseEvent = { 
     DOWN: "touchmousedown", 
     UP: "touchmouseup", 
     MOVE: "touchmousemove" 
    } 

    /* == EVENT LISTENERS == */ 
    var onMouseEvent = function(event) { 
     var type; 

     switch (event.type) { 
      case "mousedown": type = TouchMouseEvent.DOWN; break; 
      case "mouseup": type = TouchMouseEvent.UP; break; 
      case "mousemove": type = TouchMouseEvent.MOVE; break; 
      default: 
       return; 
     } 

     var touchMouseEvent = normalizeEvent(type, event, event.pageX, event.pageY);  
     $(event.target).trigger(touchMouseEvent); 
    } 

    var onTouchEvent = function(event) { 
     var type; 

     switch (event.type) { 
      case "touchstart": type = TouchMouseEvent.DOWN; break; 
      case "touchend": type = TouchMouseEvent.UP; break; 
      case "touchmove": type = TouchMouseEvent.MOVE; break; 
      default: 
       return; 
     } 

     var touch = event.originalEvent.touches[0]; 
     var touchMouseEvent; 

     if (type == TouchMouseEvent.UP) 
      touchMouseEvent = normalizeEvent(type, event, null, null); 
     else 
      touchMouseEvent = normalizeEvent(type, event, touch.pageX, touch.pageY); 

     $(event.target).trigger(touchMouseEvent); 
    } 

    /* == NORMALIZE == */ 
    var normalizeEvent = function(type, original, x, y) { 
     return $.Event(type, { 
      pageX: x, 
      pageY: y, 
      originalEvent: original 
     }); 
    } 

    /* == LISTEN TO ORIGINAL EVENT == */ 
    var jQueryDocument = $(document); 

    if ("ontouchstart" in window) { 
     jQueryDocument.on("touchstart", onTouchEvent); 
     jQueryDocument.on("touchmove", onTouchEvent); 
     jQueryDocument.on("touchend", onTouchEvent); 
    } else { 
     jQueryDocument.on("mousedown", onMouseEvent); 
     jQueryDocument.on("mouseup", onMouseEvent); 
     jQueryDocument.on("mousemove", onMouseEvent); 
    } 

})();

html页面（index.html的）

<!DOCTYPE html> 
<html> 
    <head> 
     <title>touch</title> 

     <meta http-equiv="Content-Type" content="text/html;charset=utf8" /> 
     <meta name="author" content="AUTHOR" /> 
     <meta name="keyword" content="KEYWORD" /> 
     <meta name="description" content="DESCRIPTION" /> 
     <script type="text/javascript" src="jquery.min.js"></script><!-- Please Download the jquery library --> 
     <script type="text/javascript" src="touchmouse.js"></script> 
     <script type="text/javascript"> 
     $(function(){ 
       var startdrag= false; 
      $("#a").on(TouchMouseEvent.DOWN, function(){ 
       startdrag= true; 
       move(); 

      }); 
      function move(){ 

       $("#a").on(TouchMouseEvent.MOVE, function(e){ 
        if(startdrag){ 
        $(this).css('left',(e.pageX-50)) ; 
        $(this).css('top',(e.pageY-50)); 
       } 
       }); 

      } 
      $("#a").on(TouchMouseEvent.UP, function(e){ 
       startdrag= false; 

      }); 

     }); 
     </script> 

    </head> 
    <body> 
     <div id ="a" style="display:block;position:absolute;width:100px;height:100px;background:red;" ></div> 
    </body> 
</html>

这是为我工作在Android手机上。

来源

2013-07-12 11:29:52 Lekhnath

在iPad上为我工作，谢谢你的提示！ – Photon

你也可以尝试 - jQuery UI Touch Punch

Click Here

来源

2013-07-12 11:32:42

鼠标事件触摸事件的iPad兼容性

回答

相关问题