javascript 鼠标事件到触摸事件以实现 iPad 兼容性
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17613710/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
mouse events to touch event for ipad compatibility
提问by Ash
i have this kids painting app which uses mouse events to paint on an image. However i need to convert mouse events to touch so that it could work on an ipad. Please can someone explain me how to do this. My app code is quite similar to this sample code http://cool-php-tutorials.blogspot.co.uk/2011/05/simple-html5-drawing-app-with-saving.html.
我有这个儿童绘画应用程序，它使用鼠标事件在图像上绘画。但是我需要将鼠标事件转换为触摸，以便它可以在 ipad 上工作。请有人解释我如何做到这一点。我的应用程序代码与此示例代码http://cool-php-tutorials.blogspot.co.uk/2011/05/simple-html5-drawing-app-with-saving.html非常相似。
P.S my knowledge about javascript is not at an a advanced level so please if you can show me working code or examples will be a great help
PS 我对 javascript 的了解并不高，所以如果你能向我展示工作代码或示例将是一个很大的帮助
My code which does the mouse event are as follows. Please can covert this functionality from mouse to touch.. please i am stuck at this since 2 days now.. :|
我执行鼠标事件的代码如下。请可以将此功能从鼠标转换为触摸.. 请我自 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();
}
}
回答by Niels
You can map it like this:
你可以像这样映射它：
$('#drawingCanvas').bind("mousedown touchstart", function(e){
$('#drawingCanvas').bind("mousemove touchmove", function(e){
$('#drawingCanvas').bind("mouseup touchend", function(e){
And than finetune the code if needed.
然后根据需要微调代码。
回答by Lekhnath
Try this one :
试试这个：
NOTE : you need jquery library .
注意：您需要 jquery 库。
touchmouse.js
触摸鼠标.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 page (index.html)
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>
This is working for me on android phones.
这在安卓手机上对我有用。
回答by winthers
The problem with mouse and touch events is that they do not have the same api,
鼠标和触摸事件的问题在于它们没有相同的 api，
so u will need to normalize the api to have both mouse and touch inputs.
所以你需要对 api 进行规范化以同时具有鼠标和触摸输入。
There is some solutions out there like:
有一些解决方案，例如：
And the hammer code is very easy to use:
而且锤子代码非常好用：
var hamme = $("#myCanvas").hammer();
hammer.on("touch", function(e){
e.gesture.center.pageX;
// ..
});
hammer.on("drag", function(e){
e.gesture.center.pageX
//..
})
