Quote:
Originally Posted by Akira71
Quite possibly, but the book seemed to read as though it would be possible to test this in Safari at the least. It sure doesn't seem like it and since the events never get called, what you linked to makes perfect sense.
I would like to know if there is a better way to do this then. Suspect there isn't quite one.
|
As was noted, desktop Safari doesn't generate touch events, so the existing code sample's events never fire.
You're right that the author is vague in some places (and seems to be misleading in others [chapter 4 node installation]) about whether a given example should work on the desktop only, mobile only, sim only, or some combination there of.
Of course, this is meant to be a mobil web app book, so it's understandable that example code is best run in the sim or on a mobile device.
Regardless (and regardless that it's been over a year since you posted your missive.... sorry it took me so long to find this book!), here's one possible solution that hooks mouse events into the existing touch events:
Code:
// included just to be able to orient oneself
canvas.ontouchmove = function(event) {
event.preventDefault();
var newx = event.touches[0].clientX;
var newy = event.touches[0].clientY - canvastop;
line(lastx, lasty, newx, newy);
lastx = newx;
lasty = newy;
}
// new code here
var mouseDown = 0;
canvas.onmousedown = function(event) {
++mouseDown;
event.preventDefault();
event.touches = [ {} ];
event.touches[0].clientX = event.clientX;
event.touches[0].clientY = event.clientY;
canvas.ontouchstart(event)
}
canvas.onmouseup = function(event) {
--mouseDown;
}
canvas.onmousemove = function(event) {
if (mouseDown) {
event.preventDefault();
event.touches = [ {} ];
event.touches[0].clientX = event.clientX;
event.touches[0].clientY = event.clientY;
canvas.ontouchmove(event)
}
}
var clearButton = document.getElementById('clear');
Chapter 2 Draw and Mac/MAMP
