jQuery impedisce agli eventi click di sparare quando si scorre un div

Question

Sembra abbastanza facile? Ma sto usando un controllo di scorrimento personalizzato (http://github.com/inuyaksa/jquery.nicescroll) e ho provato la maggior parte dei trucchi che ho visto per impedirlo quando si utilizza draggable(). Ma non stanno lavorando per questo ... Ho caricato la pagina e il codice qui:

Demo: http://www.beforethecode.net/blazin Fonte: http://www.beforethecode.net/blazin/blazin.zip

Questo è per un progetto di touch screen. Finora la mia unica soluzione era quella di associare i $ pollici a 'dblclick' in modo che smettesse di sparare dopo aver trascinato il mouse/dito ... Ma mi piacerebbe davvero farlo funzionare con un solo clic dopo che lo scorrimento si è fermato.

Answer 1

La cosa migliore sarà una soluzione simile a quanti autocompletes lavorare annullando eventi nativi e utilizzando invece i timeout e le bandiere a solo agire in circostanze desiderati:

1. event.preventDefault() "click" evento relativi controlli, <a /> tag ecc. (es. non lasciare che si verifichi un comportamento del browser nativo relativo al clic di attivazione).
2. In caso di evento "clic" dopo aver impedito l'impostazione predefinita, inserire l'azione di clic in un piccolo setTimeout e salvare l'handle di timeout.
3. Durante l'evento "stopdrag", deselezionare l'handle di timeout; ciò si verificherà in teoria durante il periodo di timeout dell'evento "click" e impedirà il verificarsi di un clic dopo un stopdrag logico, mentre su un clic reale non ci sarà stopdrag per annullare il timeout (quindi l'azione avrà luogo come desiderato allora).

Codice:

var clickActionTimeout = null; 

function clearClickActionTimeout() { 
    if(clickActionTimeout) { 
    clearTimeout(clickActionTimeout); 
    clickActionTimeout = null; 
    } 
} 

$elem.click(function(e) { 
    e.preventDefault(); 
    clearClickActionTimeout(); 
    clickActionTimeout = setTimeout(function() { 
    // This was a real click if we got here... 
    openPicture(); 
    }, 200); 
}); 

$elem.bind('stopdrag', function() { 
    clearClickActionTimeout(); 
}); 

Answer 2

io non lavoro con questa libreria, ma forse questo ti aiuta. Come ottenere, non è per dispositivo mobile, è per touch screen. Tutto il lavoro va bene sul mio telefono, lo scorrimento è ok.

Si dispone di alcune proprietà di configurazione e alcune di esse sono adatte solo alle proprie esigenze. Eccone alcuni:

. touchbehavior - abilita il trascinamento del cursore-trascinamento come dispositivi touch nel computer desktop, l'impostazione predefinita è false

. cursordragontouch, trascinare il cursore in modalità/touchbehavior tocco anche (default: false)

https://github.com/inuyaksa/jquery.nicescroll/blob/master/README

non vedo il codice, il tuo link è rotto, forse già si conosce di questo. Ma se no, spero che questo ti possa aiutare. Questo è solo trovare un nido di giumenta.

Answer 3

Non so come gestire gli eventi di tocco. Tuttavia, questo è il modo in cui lo farei per gli eventi click e penso che non sia molto diverso da quelli http://jsfiddle.net/USvay/

L'idea è di impedire l'evento click e invece la funzione desiderio si attiva con mouseup se un certo tempo è o meno passato.

var clicked = true, 
    tOut; 

$('a').on('click', function (e) { 
    e.preventDefault(); 
}).on('mousedown', function() { 


    tOut = setTimeout(function() { 
     clicked = false; 
    }, 200); 



}).on('mouseup', function() { 

    if (clicked == true) { 
     clearTimeout(tOut); 
     my_function(); 

    } else { 
     clicked = true; 
     $('<p>Dragged</p>').appendTo('#result'); 
    } 

}); 

function my_function() { 
    $('<p>Clicked</p>').appendTo('#result'); 
} 

Answer 4

Hai provato:

event.stopPropagation() 

Ecco il reference on this function.