samedi 28 mars 2015

simulate touch events for html5

I am building an html5 game and I would like to send multi touch events to the browser programmatically.


My idea is to setup a node server and forward the events to the webpage. Is there any library that already does this or could I simulate such events?


For example this page is multi touch enabled but on the desktop you can't interact as there is only mouse. If I could simulate the events, then I can interact with the objects. I am looking for something like this... Any pointers are helpful...


I tried using ::



var e = document.createEvent('UIEvent');
e.initUIEvent('touchstart', true, true);
e.touches = [{pageX: x, pageY: y}];


I got no response with the above and then I used this



var e = document.createEvent('TouchEvent');
e.touches = [{pageX: x, pageY: y}];


I get an error if I am not in mobile emulation mode but when I move to mobile emulation mode I get no response


I also tried :: this with no luck


Update


From here



var type = 'move'; // or start, end
var event = document.createEvent('TouchEvent');
event.initEvent('touch' + type, true, true);
event.constructor.name; // Event (not TouchEvent)

var point = {x: 10, y: 10 };
event.touches = [{
identifier: Date.now() + i,
pageX: x,
pageY: y,
screenX: x,
screenY: y,
clientX: x,
clientY: y
}, { identifier: Date.now() + i,
pageX: point.x,
pageY: point.y,
screenX: point.x,
screenY: point.y,
clientX: point.x,
clientY: point.y}]

dispatchEvent(event);


This worked but only in mobile emulation mode


With this a touch event is raised but with a real touch I have the following data



TouchEvent {metaKey: false, altKey: false, shiftKey: false, ctrlKey: false, changedTouches: TouchList…}


But with the custom event the changedTouches element null and yes I tried setting the e.touches to e.changedTouches



TouchEvent {metaKey: false, altKey: false, shiftKey: false, ctrlKey: false, changedTouches: null…}

Aucun commentaire:

Enregistrer un commentaire