+ MENY
2013 Jan 20
5

ontouchstart – 300ms snabbare jQuery klick

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.

KLICKA PÅ MIG JAG ÄR ANPASSAD FÖR MOBIL
KLICKA PÅ MIG JAG ÄR EJ ANPASSAD FÖR MOBIL

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.

SPONSRAT - REKOMMENDERADE OCH TESTADE WEBBHOTELL:
Webbhotell Pris/mån Utrymme Trafik Domän
City Network 74kr 250GB 5000GB Obegränsat
Binero 36kr 10GB 30GB Obegränsat
Surftown 36kr 10GB 30GB Obegränsat
One.com 12kr 3GB Fri 1
Loopia 83kr 5GB Fri Obegränsat
Strongbox 65kr 5GB 40GB Obegränsat
Om Simon Rybrand
Jag som driver den här bloggen heter Simon Rybrand. Här skriver jag om entreprenörskap, internetmarknadsföring och webbdesign.Jag driver framförallt sajten MatematikVideo.se där målet är att hjälpa så många som möjligt att lyckas med sina kurser i matematik.

5 Kommentarer

  1. Joel Mandell skriver:

    Genialiskt, vilken enkel och bra lösning!

  2. Anders Björk skriver:

    Tjusigt! Små saker som gör stor skillnad för upplevelsen.

  3. Jesse skriver:

    Riktigt grym lösning!! Jag tycker att detta ger en otrolig boost för användarupplevelsen :)

  4. You’re the greatest! JMHO

Comment