javascript - How to trigger a touch event? - Stack Overflow

admin管理员组

文章数量:1403438

Lets start with some event listeners:

window.addEventListener('scroll', function (e) {
    console.log('scroll', e);
});
window.addEventListener('touchstart', function (e) {
    console.log('touchstart', e);
});
window.addEventListener('touchmove', function (e) {
    console.log('touchmove', e);
});
window.addEventListener('touchend', function (e) {
    console.log('touchend', e);
});

I need to programmatically touch the document in position {pageX: 0, pageY: 0}, move it to {pageX: 0, pageY: 100} and end the touch event.

To do this, I am going to build a helper function TouchEvent that will trigger the touch event on the specified element.

/**
 * @see 
 * @see .html
 * @see 
 */
function touchEvent (element, type, identifier, pageX, pageY) {
    var e,
        touch,
        touches,
        targetTouches,
        changedTouches;

    touch = document.createTouch(window, element, identifier, pageX, pageY, pageX, pageY);

    if (type == 'touchend') {
        touches = document.createTouchList();
        targetTouches = document.createTouchList();
        changedTouches = document.createTouchList(touch);
    } else {
        touches = document.createTouchList(touch);
        targetTouches = document.createTouchList(touch);
        changedTouches = document.createTouchList(touch);
    }

    e = document.createEvent('TouchEvent');
    e.initTouchEvent(type, true, true, window, null, 0, 0, 0, 0, false, false, false, false, touches, targetTouches, changedTouches, 1, 0);

    window.dispatchEvent(e);
};

I am going to make sure that the document is loaded and dispatch the touch events representing earlier agreed scenario.

document.addEventListener('DOMContentLoaded', function() {
    var identifier = new Date().getTime(),
        element = document,
        i = 0;

    touchEvent(element, 'touchstart', identifier, 0, 0);
    while (i++ < 100) {
        touchEvent(element, 'touchmove', identifier, 0, i);
    }
    touchEvent(element, 'touchend', identifier, 0, i);
});

The expected is that touchstart, touchmove and touchend events have been triggered. The unexpected is that scroll event has not been triggered and the actual "touching" of the document is not reflected in the current document.

window.addEventListener('scroll', function (e) {
    console.log('scroll', e);
});
window.addEventListener('resize', function (e) {
    console.log('resize', e);
});
window.addEventListener('touchstart', function (e) {
    console.log('touchstart', e);
});
window.addEventListener('touchmove', function (e) {
    console.log('touchmove', e);
});
window.addEventListener('touchend', function (e) {
    console.log('touchend', e);
});

/**
 * @see 
 * @see .html
 * @see 
 */
function touchEvent (element, type, identifier, pageX, pageY) {
    var e,
        touch,
        touches,
        targetTouches,
        changedTouches;
  
    if (!document.createTouch) {
        throw new Error('This will work only in Safari browser.');
    }

    touch = document.createTouch(window, element, identifier, pageX, pageY, pageX, pageY);
    
    if (type == 'touchend') {
        touches = document.createTouchList();
        targetTouches = document.createTouchList();
        changedTouches = document.createTouchList(touch);
    } else {
        touches = document.createTouchList(touch);
        targetTouches = document.createTouchList(touch);
        changedTouches = document.createTouchList(touch);
    }

    e = document.createEvent('TouchEvent');
    e.initTouchEvent(type, true, true, window, null, 0, 0, 0, 0, false, false, false, false, touches, targetTouches, changedTouches, 1, 0);

    window.dispatchEvent(e);
};

document.addEventListener('DOMContentLoaded', function() {
    var identifier = new Date().getTime(),
        element = document,
        i = 0;

    touchEvent(element, 'touchstart', identifier, 0, 0);
    while (i++ < 100) {
        touchEvent(element, 'touchmove', identifier, 0, i);
    }
    touchEvent(element, 'touchend', identifier, 0, i);
});

#playground {
    background: #999; height: 5000px;
}

<div id="playground"></div>

Lets start with some event listeners:

window.addEventListener('scroll', function (e) {
    console.log('scroll', e);
});
window.addEventListener('touchstart', function (e) {
    console.log('touchstart', e);
});
window.addEventListener('touchmove', function (e) {
    console.log('touchmove', e);
});
window.addEventListener('touchend', function (e) {
    console.log('touchend', e);
});

I need to programmatically touch the document in position {pageX: 0, pageY: 0}, move it to {pageX: 0, pageY: 100} and end the touch event.

To do this, I am going to build a helper function TouchEvent that will trigger the touch event on the specified element.

/**
 * @see https://gist.github./sstephenson/448808
 * @see https://developer.apple./library/iad/documentation/UserExperience/Reference/TouchEventClassReference/TouchEvent/TouchEvent.html
 * @see http://stackoverflow./questions/18059860/manually-trigger-touch-event
 */
function touchEvent (element, type, identifier, pageX, pageY) {
    var e,
        touch,
        touches,
        targetTouches,
        changedTouches;

    touch = document.createTouch(window, element, identifier, pageX, pageY, pageX, pageY);

    if (type == 'touchend') {
        touches = document.createTouchList();
        targetTouches = document.createTouchList();
        changedTouches = document.createTouchList(touch);
    } else {
        touches = document.createTouchList(touch);
        targetTouches = document.createTouchList(touch);
        changedTouches = document.createTouchList(touch);
    }

    e = document.createEvent('TouchEvent');
    e.initTouchEvent(type, true, true, window, null, 0, 0, 0, 0, false, false, false, false, touches, targetTouches, changedTouches, 1, 0);

    window.dispatchEvent(e);
};

I am going to make sure that the document is loaded and dispatch the touch events representing earlier agreed scenario.

document.addEventListener('DOMContentLoaded', function() {
    var identifier = new Date().getTime(),
        element = document,
        i = 0;

    touchEvent(element, 'touchstart', identifier, 0, 0);
    while (i++ < 100) {
        touchEvent(element, 'touchmove', identifier, 0, i);
    }
    touchEvent(element, 'touchend', identifier, 0, i);
});

The expected is that touchstart, touchmove and touchend events have been triggered. The unexpected is that scroll event has not been triggered and the actual "touching" of the document is not reflected in the current document.

window.addEventListener('scroll', function (e) {
    console.log('scroll', e);
});
window.addEventListener('resize', function (e) {
    console.log('resize', e);
});
window.addEventListener('touchstart', function (e) {
    console.log('touchstart', e);
});
window.addEventListener('touchmove', function (e) {
    console.log('touchmove', e);
});
window.addEventListener('touchend', function (e) {
    console.log('touchend', e);
});

/**
 * @see https://gist.github./sstephenson/448808
 * @see https://developer.apple./library/iad/documentation/UserExperience/Reference/TouchEventClassReference/TouchEvent/TouchEvent.html
 * @see http://stackoverflow./questions/18059860/manually-trigger-touch-event
 */
function touchEvent (element, type, identifier, pageX, pageY) {
    var e,
        touch,
        touches,
        targetTouches,
        changedTouches;
  
    if (!document.createTouch) {
        throw new Error('This will work only in Safari browser.');
    }

    touch = document.createTouch(window, element, identifier, pageX, pageY, pageX, pageY);
    
    if (type == 'touchend') {
        touches = document.createTouchList();
        targetTouches = document.createTouchList();
        changedTouches = document.createTouchList(touch);
    } else {
        touches = document.createTouchList(touch);
        targetTouches = document.createTouchList(touch);
        changedTouches = document.createTouchList(touch);
    }

    e = document.createEvent('TouchEvent');
    e.initTouchEvent(type, true, true, window, null, 0, 0, 0, 0, false, false, false, false, touches, targetTouches, changedTouches, 1, 0);

    window.dispatchEvent(e);
};

document.addEventListener('DOMContentLoaded', function() {
    var identifier = new Date().getTime(),
        element = document,
        i = 0;

    touchEvent(element, 'touchstart', identifier, 0, 0);
    while (i++ < 100) {
        touchEvent(element, 'touchmove', identifier, 0, i);
    }
    touchEvent(element, 'touchend', identifier, 0, i);
});

#playground {
    background: #999; height: 5000px;
}

<div id="playground"></div>

What is my setup missing to make the browser interpret the touch events as if those were issued by the end user? In essence, I am expecting the browser to scroll in response to the series of programmatically triggered touch start, move and end events.

• javascript
• safari
• webkit

Share Improve this question Follow edited Nov 4, 2014 at 21:22 Gajus asked Nov 4, 2014 at 20:39 GajusGajus 74.1k8080 gold badges297297 silver badges472472 bronze badges 1

• document.createTouch() is deprecated. Now you have to use the Touch interface. Witch seems to not be already implemented in famous Browsers. – ABeltramo Commented Jan 25, 2017 at 8:31

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 1

I'm not sure if I understood your question correctly, but if you start touch at the top of page and drag down you're trying to scroll page to top and it's already there so why should the scroll trigger. Perhaps start at position {pageX: 0, pageY: 100} and end at {pageX: 0, pageY: 0} and then see if it's still not working.

本文标签： javascriptHow to trigger a touch eventStack Overflow