Nuförtiden så känns det allt viktigare att redan från början bygga sin sajt med ett responsivt tänk. Själv försöker jag att göra de nya sajter jag bygger responsiva och någorlunda väl anpassade för olika mobiler och plattor.

Ofta så blir det då att jag bygger viss funktionalitet med olika Jquery skript där klick kopplas till någon funktion som visar exempelvis en meny eller ett innehåll. Vanligtvis har jag alltid byggt detta med någon ”click” funktion men har alltid stört mig på att det blir lite (300ms) långsammare respons på själva klicket i en touch baserad apparat, t.ex. en mobil.

En enkel och smidig lösning för användaren

Nu finns det faktiskt en mycket enkel lösning på det här problemet som jag tror kan vara bra att känna till för webbutvecklaren. Förvisso är det just bara 300ms men känslan när något reagerar snabbt tycker i alla fall jag gör ganska mycket för användarupplevelsen.

Tanken är att istället redan från början, när html dokumentet laddas in, bestämma sig för att binda (jQuery.bind) klicken till antingen ’click’ funktionen eller till en ’touchstart’ funktion. Själva koden ser ut så här:

if ("ontouchstart" in document.documentElement)
{
    var browserEvent = "touchstart";
}
else
{
    var browserEvent = "click";
}

$("div").bind(browserEvent, function (e) 
{
    //gör lite grejer tex:
    $(this).slideDown();
});

Demo

För dig som vill testa på känslan i detta så har jag två divtaggar nedan, för att du skall se skillnaden måste du surfa med en touch känslig apparat. I en vanlig webbläsare på datorn kommer du inte att märka någon skillnad.

Det som vi gör här ovan är alltså att redan när html dokumentet laddas så kollar vi av om det finns stöd för touchevents och väljer då att lyssna på dessa istället för klick (musklick). Förhoppningsvis kommer då hemsidan att kännas snabbare och kvickare i sin respons på mobiler och plattor.