I'm using jQuery mobile for my application.

Is it possible to release a gesture using jQuery Mobile? If a user places fingers and drag the screen - can I release this gesture using JavaScript, even if he leaves his finger on the screen?

For example - is it possible to release touch move after 1000 ms so the event will end, such as $(this).touchend(); (like I could do $(this).click();) ?

Edit: On the other hand, maybe someone has any other idea on how to limit the touch / touchmove time?

I'm using jQuery mobile for my application.

Is it possible to release a gesture using jQuery Mobile? If a user places fingers and drag the screen - can I release this gesture using JavaScript, even if he leaves his finger on the screen?

For example - is it possible to release touch move after 1000 ms so the event will end, such as $(this).touchend(); (like I could do $(this).click();) ?

Edit: On the other hand, maybe someone has any other idea on how to limit the touch / touchmove time?

• javascript
• jquery
• jquery-mobile

2 Answers 2

You can trigger any event by calling $(this).trigger(eventName) See the jQuery docs on this method.

Your case would be: $(this).trigger('touchend');

If you want an event that will fire after 1000ms of a touch, maybe consider the taphold event from jQM? You can specify the delay by setting $.event.special.tap.tapholdThreshold.

Does something like this work?

• http://jsfiddle/LG9BM/

JS

function bindEventTouch(element) {
    element.bind('tap taphold swipe swiperight swipeleft', function(event, ui) {
        console.log('Event: '+event.type); 

        if(event.type == 'taphold') {
            console.log('Was Event taphold?: '+event.type); 
            element.trigger('touchend');
        }
    });

    element.bind('touchend', function(event, ui) {
        console.log('Triggered touchend Event: '+event.type); 
    });
}

$('.displayEvent').each(function(){
    bindEventTouch($(this));
});​

HTML

<div data-role="page" id="home"> 
    <div data-role="content">
        <div id="display-event-1" class="add-border displayEvent">
            <p>Tap, TapHold (for 1 second), Swipe, SwipeRight or SwipeLeft</p>
        </div>
        <br />
        <div id="display-event-2" class="add-border displayEvent">
            <p>Tap, TapHold (for 1 second), Swipe, SwipeRight or SwipeLeft</p>
        </div>
        <br />
        <div id="display-event-3" class="add-border displayEvent">
            <p>Tap, TapHold (for 1 second), Swipe, SwipeRight or SwipeLeft</p>
        </div>
    </div>
</div>​

CSS

.add-border {
    border-style:solid;
    border-width:1px;
    width:100%;   
    text-align:center;
}​