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
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…}
From How do I programmatically create a TouchEvent in Chrome 41?:
var type = "move"; // or start, end
var event = document.createEvent("Event");
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