javascript - manually trigger touch event

Question

I searched for the past 30 minutes, but didn't find a solution.

I want to trigger a touchstart event on an element.

This fires the touchstart event:

var e = document.createEvent('MouseEvent');

e.initMouseEvent("touchstart", true, true, window, 1, screenX, screenY, clientX, clientY,
    ctrlKey, altKey, shiftKey, metaKey, button, relatedTarget);

target.dispatchEvent(e);

Note that the variables are defined by my function

But there's a problem with that. The event object doesn't have a touches property. So something like this won't work:

var touch = e.touches[0];

Is there a way to trigger a touchstart event manually (it should work on Android >= 4.0 and Chrome with touch enabled [DevTools]) ?

Please note, that I do NOT want to use any framework like jQuery. With jQuery it's easy to create a touchevent on an element ;)

Answer 1

According to W3C

var e = document.createEvent('TouchEvent');

Then, also change

e.initMouseEvent();

to

e.initTouchEvent();

As you've created a touchstart event.

The W3C link says:

Some user agents implement an initTouchEvent method as part of the TouchEvent interface. When this method is available, scripts can use it to initialize the properties of a TouchEvent object, including its TouchList properties (which can be initialized with values returned from createTouchList). The initTouchEvent method is not yet standardized, but it may appear in some form in a future specification.

So you'll might have to resort to e.initUIEvent('touchstart', true, true);
In addition, the official spec also states that the TouchList object is optional, and can be created manually using the createTouchList method. To add a touch to that list, you'll have to call the createTouch method, where you'll pass all coordinates and such:

6.1 Methods

#createTouch
Creates a Touch object with the specified attributes.
Parameter | Type        | Nullable | Optional | Description
view      | WindowProxy |   ?      |    ?     |
target    | EventTarget |   ?      |    ?     |
identifier| long        |   ?      |    ?     |
pageX     | long        |   ?      |    ?     |
pageY     | long        |   ?      |    ?     |
screenX   | long        |   ?      |    ?     |
screenY   | long        |   ?      |    ?     |
Return type: Touch

#createTouchList
Creates a TouchList object consisting of zero or more Touch objects. Calling this method with no arguments creates a TouchList with no objects in it and length 0 (zero).

Parameter | Type  | Nullable | Optional | Description
touches   | Touch |     ?    |    ?     |
Return type: TouchList

If that doesn't work, you could try this:

var e = document.createEvent('UIEvent');
e.initUIEvent();

should work, it makes more sense than createEvent('MouseEvent') at any rate...
But for testing purposes, why not open your chrome console and check Emulate touch events, plus override user agent to Android 4. (Ctrl+Shift+j > click the gear bottom right corner, and select Overrides, there you'll find all the settings you need)

Since the touch-events have a long way to go, still in terms of their becoming standardized, it turns out the touches property is not RO (yet?), so you can use this quick-fix (which the OP found and used with the desired result):

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

Which, I think (I can't believe it if it weren't the case) is faster than:

e.touches = e.createTouchList(
    e.createTouch(window, target, 0, pageX, pageY, screenX, screenY)
);