Korzystanie z zdarzenia mousedown na urządzeniach mobilnych bez aplikacji jQuery mobile?

Question

Zbudowałem webapp i dla odrobiny języka, chciałem dodać mousedown i mouseup handler do zamiany obrazów (w tym przypadku, aby przycisk wyglądał jakby był naciśnięty).

mój kod jest coś takiego:

window.onload = function() { 
    //preload mouse down image here via Image() 
    $("#button_img").mousedown(function(){$("#button_img").attr("src","button_on.png");}); 
    $("#button_img").mouseup(function(){$("#button_img").attr("src","button_off.png")}); 
} 

Działa maśle na pulpicie, ale na telefon (testowanie w iOS Safari), MouseDown i mouseUp wydarzenia toczyły się w tym samym czasie, tak skutecznie, nic się nie dzieje .

Próbowałem użyć vmousedown i vmouseup wydarzeń w jQueryMobile, jednak ten kod:

//include jquerymobile.js and jquerymobile.css 
window.onload = function() { 
    //preload mouse down image here via Image() 
    $("#button_img").vmousedown(function(){$("#button_img").attr("src","button_on.png");}); 
    $("#button_img").vmouseup(function(){$("#button_img").attr("src","button_off.png")}); 
} 

prostu dał mi błędy, które vmousedown i vmouseup nie istnieją. Ponadto jQueryMobile przesłania kod CSS, który już napisałem dla tej strony.

Czy istnieje sposób na uzyskanie vmousedown i vmouseup do pracy, a do tego bez CSS jQuery Mobile?

góry dzięki
-Esa

Answer 1

Szukacie touchstart i touchend. Są to zdarzenia, które próbują naśladować przez vmousedown i vmouseup.

Oto przykład:

window.onload = function() { 
    //preload mouse down image here via Image() 
    $("#button_img").bind('touchstart', function(){ 
     $("#button_img").attr("src","button_on.png"); 
    }).bind('touchend', function(){ 
     $("#button_img").attr("src","button_off.png"); 
    }); 
} 

to będzie działać bez ram na dowolnym urządzeniu obsługującym zdarzenia dotykowe. Aby wykonać ten test, możesz użyć czegoś takiego, jak Modernizr, a jeśli urządzenie nie obsługuje zdarzeń dotyku, połącz je ze zwykłymi zdarzeniami pulpitu.

Podczas korzystania touchstart/touchend/touchmove masz jakieś ciekawe informacje, na przykład, jak wiele detali występują jednocześnie, dzięki czemu można wykryć, czy użytkownik jest przewijanie lub usiłowania, aby powiększyć.

UPDATE

Ponieważ obiekt wewnątrz obsługi zdarzeń event różni zdarzeń dotykowych i zdarzenia myszy, jeśli chcesz poznać współrzędne przypadku obu kierunkach, można zrobić coś takiego (przykład poniżej zakłada modernizr został załadowany):

//determine which events to use 
var startEventType = 'mousedown', 
    endEventType = 'mouseup'; 

if (Modernizr.touch === true) { 
    startEventType = 'touchstart'; 
    endEventType = 'touchend'; 
} 

//bind to determined event(s) 
$("#button_img").bind(startEventType, function(event) { 

    //determine where to look for pageX by the event type 
    var pageX = (startEventType === 'mousedown') 
       ? event.pageX 
       : event.originalEvent.touches[0].pageX; 

    ... 
})... 

UPDATE

szukałem tego nad i wydaje się, że nie ma potrzeby, aby wykryć typ zdarzenia przed wiążące obsługi zdarzeń:

//bind to determined event(s) 
$("#button_img").bind('mousedown touchstart', function(event) { 

    //determine where to look for pageX by the event type 
    var pageX = (event.type.toLowerCase() === 'mousedown') 
       ? event.pageX 
       : event.originalEvent.touches[0].pageX; 

    ... 
})... 

Jeśli martwisz się o otrzymaniu obu wydarzeń w krótkim odstępie czasu można użyć timeout udusić obsługi zdarzeń:

//create timer 
var timer = null; 

//bind to determined event(s) 
$("#button_img").bind('mousedown touchstart', function(event) { 

    //clear timer 
    clearTimeout(timer); 

    //set timer 
    timer = setTimeout(function() { 

     //determine where to look for pageX by the event type 
     var pageX = (event.type.toLowerCase() === 'mousedown') 
        ? event.pageX 
        : event.originalEvent.touches[0].pageX; 

     ... 

    }, 50); 
})... 

Uwaga: można wymusić mousedown i touchstart wydarzeń w krótkim odstępie czasu z narzędzi programistycznych, ale nie jestem pewien co do przypadków użycia świata rzeczywistego tutaj.

Answer 2

Jest na to sposób, aby uzyskać vmouseup, vmousedown, vmousemove, vclick itp funkcjonalności jQueryMobile bez uzyskiwania całą resztę (zwłaszcza skutki uboczne) o jquerymobile (tj akcesoriów, dodatkową css, itp)

• idź do http://jquerymobile.com/download-builder/ (narzędzie do pobierania niestandardowego kompilacji jquerymobile tylko potrzebne komponenty)
• wybrać tylko „wirtualne Mouse (vmouse) Wiązania”
• go pobrać.

Pobranie będzie zawierać tylko pojedyncze pliki .js (zarówno zminimalizowane i wersja bez kompresji). Bez css.

link ten skrypt w głowie swojej html po zwykłego jquery i używać go tak:

<head> 
    <script src="http://code.jquery.com/ui/1.10.4/jquery-ui.min.js"></script> 
    <script src="whatever/path/jquery.mobile.custom.min.js"></script> 
    <script> 
    $(function(){ // or replace this with window.onload for that matter 
     // Your code here, e.g. 
     $("#button_img").on("vmousedown", function() { 
     /*whatever*/ 
     }); 
     // CAUTION: this won't work (see note below): 
     // $("#button_img").vmousedown(function(){/*whatever*/}); // WON'T WORK 
    }); 
    </script> 
</head> 

UWAGA: metody .vmousedown(), .vmouseup(), itd. Nie będą działać. Musisz powiązać detektor zdarzeń z .on("vmousedown", ...). Nie wiem dlaczego: Myślę, że dzieje się tak dlatego, że część jquerymobile, która tworzy metody skrótów o tej samej nazwie co zdarzenia, znajduje się w innym module. Być może jest możliwe, aby dowiedzieć się, który moduł jest i dołącz go do pobrania, ale myślę, że to zmusiłoby Cię do włączenia innych niepożądanych zależności.

Answer 3

Czy rozważałeś stylizację swoich przycisków za pomocą CSS? Stan :active zostanie wyzwolony, gdy użytkownik kliknie/dotknie elementu. Oto przykład:

/* Default state */ 
#button_img { 
    background-image: url('button_off.png'); 
} 

/* Clicked/touched state */ 
#button_img:active { 
    background-image: url('button_on.png'); 
} 

CSS będzie znacznie bardziej wydajnych i będzie również w stanie lepiej odrębnych obawy (wyświetlacz vs logiki, etc).

JSBin: http://jsbin.com/beyin/1/