CODEWITHSUNDEEP
javascriptjqueryhtmlcssmobile
HjalmarCarlson
HjalmarCarlson

Reputation: 868

Mobile timed touch event

I'm trying to set up an event to display some sharing options using touchstart & touchend. This is a pretty standard function in native apps but I haven't seen it much on the mobile web. The event will allow users to tap the main content area of the site and it the tap is longer than 1 second then an options box will slide on screen displaying options for sharing the page content.

The function below works for the first event, but if users trigger the event more than onces it fires without the 1 second requirement to fire the event.

Can anyone suggest a better approach or see why the timer isn't working every time?

if ( typeof ontouchstart != 'undefined' && typeof ontouchend != 'undefined' ) { 
var touchStartOrClick = 'touchstart', touchEndOrClick = 'touchend'; 
} else {
var touchStartOrClick = 'click', touchEndOrClick = 'click'; 
};

function shareTog(){
    $('.sharing-pop').animate({width: 'toggle'});
}

var touchTrigger;

$('#content').bind(touchStartOrClick, function(){
    setInterval(function(){
        touchTrigger = true;
    }, 1000);
}).bind(touchEndOrClick, function(){
    window.clearInterval();
    if(touchTrigger == true){
        shareTog();
        touchTrigger = false;
    }
});

I'm aware this would be much easier to do with jQuery Mobile but unfortunately it's not an option.

Upvotes: 0

Views: 195

Answers (2)

xiaohao
xiaohao

Reputation: 272

zepto is a good choice for you. Its touch module offers a good event handler.

Or you can check the source code of zepto touch

Upvotes: 1

HansElsen
HansElsen

Reputation: 1753

I catch your drift but I dont think it's a good solution in a web browser. On Android for example, you already get a popup when you're longpressing content on a webpage. You will have to block that event handler, but that means you're going to get native.

Upvotes: 0

Related Questions