simulate touch events for html5

Question

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…}

Mike 'Pomax' Kamermans · Accepted Answer · 2024-07-18 01:13:15Z

1

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

edited Jul 18, 2024 at 1:13

Mike 'Pomax' Kamermans

54.3k17 gold badges134 silver badges182 bronze badges

answered Mar 27, 2015 at 17:47

Pavan K

4,8408 gold badges45 silver badges82 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

simulate touch events for html5

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related