Creating and firing touch events on a touch enabled browser?

Question

I am trying to fire touch events in my JavaScript to simulate user interactions for the purpose of testing features. I have tried the following snippet:

try {
    var targetElement = document.elementFromPoint(55, 155);
    console.log(targetElement);
    var evt = document.createEvent('UIEvent');
    evt.initTouchEvent('touchstart', true, true);
    
    evt.view = window;
    evt.altKey = false;
    evt.ctrlKey = false;
    evt.shiftKey = false;
    evt.metaKey = false;
    
    targetElement.dispatchEvent(evt);
} catch (except){
    alert(except);
}

The above code throws the exception:

TypeError: Result of expression 'evt.initTouchEvent[undefined]' is not a function.

Can somebody point out what I'm doing wrong?

vbence · Accepted Answer · 2011-04-19T08:56:39.707

9

According to w3c touch spec, TouchEvent is a subclass of UIEvent. Try creating it like:

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

edited Apr 19 '11 at 08:56

answered Apr 19 '11 at 08:23

vbence

20,084
9
69
118

Tried and still the same exception. The UIEvent object _is created_ whether I use the singular or the plural. – prk Apr 19 '11 at 08:41
I don't have a device to test it right now. Will test and update tomorrow. – prk Apr 19 '11 at 09:46
@Ashu AFAIK the Android emulator has a mobile WebKit in it. – vbence Apr 19 '11 at 11:07

score 5 · Answer 2 · answered Aug 06 '12 at 13:36

5

change:

evt.initTouchEvent('touchstart', true, true);

to:

evt.initUIEvent('touchstart', true, true);

worked for me with nightly chrome build

answered Aug 06 '12 at 13:36

Vladimir

51
1
1

Creating and firing touch events on a touch enabled browser?

2 Answers2

Linked