Question

I have the following HTML

<li onclick="setServerID(this);" class="server-item-item" data-server="1" onmousedown="serverHold(this);" onmouseup="serverRelease();"><span>MyServer</span></li>

My JS looks like:

function setServerID(server) {
    sessionStorage.serverID = server.dataset.server;
    getServerInfo();
    gotoMain();
}

And

function serverHold(server) {
    pressTimer = window.setTimeout(function() {
        var id = server.dataset.server;
        clearTimeout(pressTimer);
        $('#fav-the-server').css("visibility", "visible");
        a.slide('fav-the-server', "left", 0, "200ms", "ease", "0ms", "1", "alternate", "running");

    },1000);
    return false;
}

This all works fantastically thanks to previous posts I looked up on SO but the issue is that its a touchscreen type app and it executes the onclick

Anyway to do this that lets me get the following functionality:

List Item -> Click and Hold for 1000ms -> Execute serverHold and do
not execute the setServerID

AND

List Item -> Click and do not hold or hold for less than 1000ms – >
Execute setServerID only.

Thanks!

Answer 1

Just keep a flag indicating if you have processed a long press during the click: demo