Come evitare l'attivazione dell'evento con un solo clic quando si fa doppio clic su extjs

Question

Ho un pannello ad albero e per ciascun nodo ho eventi con un clic e doppio clic. ma quando faccio doppio clic, si attiva anche l'evento con un clic. quindi come prevenire l'attivazione dell'evento single click quando si fa doppio clic?

Answer 1

Generalmente utilizzando entrambi gli eventi con un clic e doppio clic sono considerati una cattiva pratica e altamente scoraggiati.

Tuttavia, se si desidera continuare a farlo, l'unico modo per distinguere tra clic singolo e doppio clic è aggiungere artificialmente questa distinzione misurando il tempo tra i clic.

L'idea è che non si fa la vostra azione single-click subito ma aspettate un secondo clic. Se il secondo clic arriva a breve, viene attivata l'azione doppio clic. In caso contrario, l'azione di clic singolo viene attivata dopo il ritardo.

Il codice sarà simile:

var singleClickTask = new Ext.util.DelayedTask(singleClickAction), // our delayed task for single click 
    singleClickDelay = 100; // delay in milliseconds 

function onClick() { 
    singleClickTask.delay(singleClickDelay); 
} 

function onDblClick() { 
    // double click detected - trigger double click action 
    doubleClickAction(); 
    // and don't forget to cancel single click task! 
    singleClickTask.cancel(); 
} 

function singleClickAction() { 
    // something useful... 
} 

function doubleClickAction() { 
    // something useful... 
} 


// setting event handlers on an Element 
elem.on('click', onClick); 
elem.on('dblclick', onDblClick); 

I lati negativi evidenti sono:

• C'è un ritardo per un singolo clic azione
• In OS diverso non ci può essere una diversa impostazione per l'intervallo tra i clic che farebbe scattare un doppio clic, in modo da codificare singleClickDelay non è affidabile
• timer JavaScript non è accurato al 100% ed i risultati possono essere diversi su sistemi con prestazioni diverse

Non conosco alcuna soluzione migliore, e ancora una volta, io ti scoraggiare da usando scatti sia singole e doppie, allo stesso tempo, questo di solito porta ad un'esperienza utente rotto .

Answer 2

penso che sia meglio per eseguire l'azione sul primo evento click al posto del secondo. Puoi farlo impostando un valore booleano che controlli su ciascun evento click.

Questo codice ha dimostrato un approccio

onGridRowClick: function(view, record, item, index, e, eOpts) { 
    if (record._task_in_progress) { 
     return; 
    } 
    // Let the second click as part of the double click to be ignored 
    record._task_in_progress = true; 

    // Emulating async task here 
    setTimeout(function() { 
     record._task_in_progress = false; 
    }, 1000); 
}