dblclick function is not same as tap function on touch device

Question

I code some function for my website and found that function on touch device on single tap are not same as in desktop. it's ok on desktop but not in touch device. I have some image and title about them , i want to show the title of each image on first click (tap), then go to the href link that defined for each image on tag by dbl click(dbl tap) here is my js code : anyone help?

$('ul#portfolio-list li').click(function () {
    $('ul#portfolio-list li, ul#portfolio-list li a').addClass('grayscale');
    $('ul#portfolio-list li .project-label').removeClass('opacity1');
    $(this).addClass('it');
    $('ul#portfolio-list li.it , ul#portfolio-list li.it a').removeClass('grayscale');
    $('ul#portfolio-list li.it .project-label').addClass('opacity1');
    $(this).removeClass('it');
        return false;           
}).dblclick(function () {
    $(this).addClass('it');
    window.location.replace($('ul#portfolio-list li.it  a').attr("href"));
     return false;
});
//portfolio li tap in touch device//


var tapped = false
$("ul#portfolio-list li").on("touchstart", function (e) {
    if (!tapped) {
        tapped = setTimeout(function () {
            $('ul#portfolio-list li, ul#portfolio-list li a').addClass('grayscale');
            $('ul#portfolio-list li .project-label').removeClass('opacity1');
            $(this).addClass('it');
            $('ul#portfolio-list li.it , ul#portfolio-list li.it a').removeClass('grayscale');
            $('ul#portfolio-list li.it .project-label').addClass('opacity1');
            $(this).removeClass('it');
            tapped = null
        }, 300); //wait 300ms
    } else {
        clearTimeout(tapped);
        tapped = null
        $(this).addClass('it');
        window.location.replace($('ul#portfolio-list li.it  a').attr("href"));
    }
    e.preventDefault()
});