Utilizzare l'evento Mousedown sul cellulare senza jQuery mobile?

Question

Ho creato una webapp e, per un po 'di smalto, volevo aggiungere i gestori mouse e mouseup per scambiare le immagini (in questo caso, per far sembrare un pulsante come se fosse premuto).

il mio codice è qualcosa di simile:

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")}); 
} 

Questo funziona a meraviglia sul desktop, ma sul cellulare (test in iOS Safari), il MouseDown e MouseUp eventi accadono allo stesso tempo, in modo così efficace non succede nulla .

ho cercato di usare il vmousedown e vmouseup eventi in jQueryMobile, tuttavia questo codice:

//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")}); 
} 

mi ha dato gli errori che vmousedown e vmouseup non esistono. Inoltre, jQueryMobile sovrascrive il CSS che ho già scritto per la pagina.

Quindi c'è un modo per far sì che vmousedown e vmouseup funzionino, e per farlo senza il CSS di jQuery Mobile?

Grazie in anticipo
-Esa

Answer 1

Ecco per touchstart e touchend. Sono gli eventi che vmousedown e vmouseup tentano di imitare.

Ecco un esempio:

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"); 
    }); 
} 

Ciò funzionerà senza un quadro su qualsiasi dispositivo che supporta eventi touch. È possibile utilizzare qualcosa come Modernizr per eseguire questo test e se il dispositivo non supporta gli eventi touch, eseguire il binding ai normali eventi del desktop.

Quando si utilizza touchstart/touchend/touchmove ottenere alcune informazioni interessanti, ad esempio, quanti tocchi si verificano in una sola volta, in modo da poter rilevare se l'utente scorre o il tentativo di zoom.

UPDATE

Poiché l'oggetto event all'interno di un gestore di eventi è diversa per gli eventi di tocco e gli eventi del mouse, se si desidera conoscere le coordinate della manifestazione in entrambi i casi, si può fare qualcosa di simile (nell'esempio qui sotto assume Modernizr è stato caricato):

//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

che cercavo questo più e sembra che non è necessario per rilevare il tipo di evento prima di associare il gestore di eventi:

//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; 

    ... 
})... 

Se siete preoccupati per la ricezione di entrambi gli eventi in rapida successione si potrebbe usare un timeout di strozzare il gestore di eventi:

//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); 
})... 

Nota: È possibile forzare mousedown e touchstart eventi in rapida successione con strumenti di sviluppo ma non sono sicuro circa il caso d'uso mondo reale qui.

Answer 2

C'è un modo per ottenere la vmouseup, vmousedown, vmousemove, vclick, ecc funzionalità di jQueryMobile senza ottenere tutto il resto (e soprattutto gli effetti collaterali) di jquerymobile (vale a dire la valorizzazione, css extra, e simili)

• Vai a http://jquerymobile.com/download-builder/ (uno strumento per scaricare una generazione personalizzata di jquerymobile con solo i componenti necessari)
• selezionare solo "Attacchi mouse virtuale (vmouse)"
• scaricarlo.

Il download conterrà solo un singolo file .js (sia nella versione ridotta che non compressa). No css.

link questo script nella testa del tuo html dopo jquery pianura, e usarlo in questo modo:

<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> 

NOTA: i metodi .vmousedown(), .vmouseup(), ecc non funzioneranno. Devi associare il listener di eventi a .on("vmousedown", ...). Non sono sicuro del perché: immagino sia perché la parte di jquerymobile che crea i metodi di collegamento con lo stesso nome degli eventi è in qualche altro modulo. Forse è possibile capire quale modulo è e includerlo nel download, ma penso che ti costringerebbe ad includere altre dipendenze indesiderate.

Answer 3

Hai preso in considerazione lo stile dei pulsanti utilizzando invece CSS? lo stato :active verrà attivato quando un utente fa clic/tocca l'elemento. Ecco un esempio:

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

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

CSS sarà molto più performante e vi sarà anche in grado di migliorare le preoccupazioni separati (visualizzazione vs logica, ecc).

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