How to programmatically create TouchEvent in Chrome 41?

Question

I am trying to create a touch event for unit test. After reading https://developer.mozilla.org/en-US/docs/Web/API/TouchEvent, I expected what I could do:

document.createEvent('TouchEvent'); 

But I get this error:

Inactive DOMException: Failed to create 'createEvent' in 'Document': provided event type ('TouchEvent') is invalid.

Have I seen Creating and running touch events on a browser with touch support? , which also indicates that the createEvent () method is the way to go.

I also tried to create an event through a constructor that works, say, for MouseEvent and WheelEvent:

 new window.TouchEvent() 

But here I am also mistaken:

Uncaught TypeError: Illegal Constructor

I tried in Firefox 36, but based on http://caniuse.com/#search=touch I was not surprised to see:

NotSupportedError: operation not supported

After launch

 document.createEvent('TouchEvent') 

There is no window.TouchEvent constructor event in Firefox in Firefox, which is not surprising either.

Any ideas what I'm doing wrong?

Answer 1

Similar to

 document.createEvent('TouchEvent'); 

works if you are using an actual mobile device or mobile emulation.

Answer 2

I don't know if it works in other browsers, but in chrome you can do something like

 /* eventType is 'touchstart', 'touchmove', 'touchend'... */ function sendTouchEvent(x, y, element, eventType) { const touchObj = new Touch({ identifier: Date.now(), target: element, clientX: x, clientY: y, radiusX: 2.5, radiusY: 2.5, rotationAngle: 10, force: 0.5, }); const touchEvent = new TouchEvent(eventType, { cancelable: true, bubbles: true, touches: [touchObj], targetTouches: [], changedTouches: [touchObj], shiftKey: true, }); element.dispatchEvent(touchEvent); } const myElement = document.getElementById('foo') sendTouchEvent(150, 150, myElement, 'touchstart'); sendTouchEvent(220, 200, myElement, 'touchmove'); sendTouchEvent(220, 200, myElement, 'touchend'); 

To check if your browser supports Touch and TouchEvent

 if (typeof Touch !== 'undefined' && typeof TouchEvent !== 'undefined' && Touch.length === 1 && TouchEvent.length === 1) { sendTouchEvent(200, 200, myElement, 'touchmove'); } 

see Constructors Touch and TouchEvent

Answer 3

I assume that the only way to do this without throwing an exception should be more explicit in the type of event you want to throw:

 var evt = document.createEvent('UIEvent'); evt.initUIEvent('touchstart', true, true); 

TouchEvent is a subclass of UIEvent .

Update

As mentioned above, although on a real device (or device emulation), you can easily create a TouchEvent using the standard document.createEvent method.

So maybe try / catch will be fine:

 try { document.createEvent('TouchEvent'); } catch (e) { console.log('No touching!'); } 

Answer 4

Update: in fact, this will not lead to an instance of TouchEvent. lame.

I did it like this:

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

You also need to set the touch of the event. This could be a worm, as some browsers support the document.createTouch and document.createTouchList methods, and some do not. In browsers, you do not just create arrays of JS objects that are “TouchEvent-like”. It looks like this:

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