2016-02-01 19 views
11

ho avuto un sacco di:sovrascrittura evento rubinetto con preventDefault

$('#element').on('tap', function(){ 
    // some code .. 
}) 

ho cercato molte domande circa il problema tap evento sparare due volte, e ho risolto il mio problema utilizzando e.preventDefault(), ora ho un sacco di:

$('#element').on('tap', function(e){ 
    e.preventDefault(); 
    // some code .. 
}) 

Ok, ma come ho detto, non ho molte di queste chiamate e non mi piace molto scrivere ogni volta e.preventDefault(), poi ho digitato $.fn.tap su una console di Chrome d mi ha mostrato:

function (a){return a?this.bind(c,a):this.trigger(c)} 

Ho cercato di sovrascrivere in questo modo:

$.fn.tap = function (a) { 
    a.preventDefault(); 
    return a?this.bind(c,a):this.trigger(c) 
} 

ma non ha funzionato come ha fatto nel precedente e.preventDefault().

Non vedo nulla di ovvio e non ho idee per questo.

Qualsiasi aiuto o idea è apprezzato. Grazie in anticipo.

+1

'$ .fn.tap' crea una funzione chiamata' $ ('# elemento'). Tap() ', non crea un evento – adeneo

+1

function (e) { e.preventDefault(); e.stopPropagation(); } –

+0

provare a restituire false. se si attiva la funzione in jqyer –

risposta

3

Una delle fantastiche funzioni di jQuery (di solito non uso 'jQuery 'e' cool 'in una singola frase) è che ti permette di specificare il comportamento personalizzato per gli eventi, usando l'oggetto $.event.special.

C'è il numero very little documentation sull'argomento, quindi un piccolo esempio sarebbe in ordine. un violino di lavoro utilizzando l'evento click (come questo era più conveniente per me scrivere sul mio portatile) can be found here

Tradotto alla vostra richiesta di avere tuttitap eventi hanno e.preventDefault() invocato prima del gestore attuale, dovrebbe guardare come:

$.event.special.tap.add = function(options) { 
    var handler = options.handler; 

    options.handler = function(e) { 
    e.preventDefault(); 

    return handler.apply(this, arguments); 
    } 
} 

ciò che questo codice non (dovrebbe fare, come non ho davvero provato la versione tap sopra) sta dicendo jQuery che si desidera un trattamento speciale per l'evento tab, più in particolare vuoi fornire un 'wrapping handler' che non faccia altro che chiamare e.preventDefault() prima di chiamare il gestore di eventi fornito.

UPDATE: impedito il default tap -settings dalla sovrascrittura, per i futuri visitatori


NOTA: Prima di effettuare qualsiasi tentativo a cambiare il comportamento predefinito di cose, ci si dovrebbe chiedere perché le impostazioni predefinite non funzionano per te. Principalmente perché modificare il comportamento predefinito (= previsto) disturberà il tuo sé futuro (o peggio, un'altra persona) mantenendo il tuo codice e aggiungendo funzionalità.

Al fine di creare un flusso gestibile (e prevedibile) nel codice, la soluzione suggerita per creare una funzione caso speciale ($.fn.tap) è in realtà una soluzione molto valida, in quanto non interferisce con il valore predefinito (= previsto) comportamento delle cose.

Dai link che ho fornito, dovresti essere in grado di creare il tuo tipo di evento personale (ad esempio tapOnly) e rendere più evidente l'intervento personalizzato. Quindi, entrambe le soluzioni richiederanno di cambiare i binding degli eventi, che è ciò che stai cercando di prevenire.

+0

Man, è fantastico !! Ho appena cambiato il tuo codice in '$ .event.special.tap.add = function() { ... 'perché' Object {tapholdThreshold: 750, emitTapOnTaphold: true} 'sono stati sostituiti e l'evento' tap' non è riuscito, ma ora funziona perfettamente! –

+0

Grazie per avermi fatto conoscere 'special'. meritatissima bounty +1 – BenG

+0

Grazie! Ho aggiornato l'esempio di codice per riflettere il tuo suggerimento @WashingtonGuedes, che impedisce di sovrascrivere gli altri valori. –

0

Ho avuto un problema simile, in cui e.preventDefault() funzionava su alcuni casi, ma non su altri. Non ha mostrato errori e l'utilizzo di try-catch non visualizzava lo catch alert. Aggiunta e.stopImmediatePropagation() ha fatto il trucco, in caso aiuta chiunque

10

In questo modo è possibile creare il $.fn.tap: -

$.fn.tap = function(f) { 
    $(this).on('tap', function(e) { 
    e.preventDefault(); 
    f(); 
    }); 
    return this; 
}; 

//usage 
$('.selector').tap(function() { 
    alert('foo bar') 
}) 

@Washington Guedes - sovrascrivere il tap-evento di default di usare sempre e .preventDefault() piuttosto che cambiare da $ (elemento) .on ('tap', function() {}) per $ (elemento) .TAP (function() {})

È possibile aggiungere un evento delegato a body per tap, senza specificare una destinazione. Questo verrà attivato per tutti gli eventi tap sul corpo, che è possibile quindi verificare se l'obiettivo ha il proprio evento tap, quindi è possibile quindi e.preventDefault();.

NOTA: Ciò non funzionerà per gli eventi delegati tap come mostrato.

// global tap handler 
 
$('body').on('tap', function(e) { 
 
    if ($._data(e.target, "events").tap) 
 
    e.preventDefault(); 
 
}); 
 

 
// tap event 
 
$('a.tap').on('tap', function(e) { 
 
    $(this).css('color', 'red'); 
 
}); 
 

 
// delegated tap event 
 
$('body').on('tap', 'a.delegate', function(e) { 
 
    $(this).css('color', 'green'); 
 
});
a { 
 
    display: block; 
 
    margin: 20px 0; 
 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.js"></script> 
 

 
<a class="tap" href="www.google.co.uk">tap event, prevented.</a> 
 
<a class="delegate" href="www.google.co.uk">delegate tap event, not prevented.</a> 
 
<a href="www.google.co.uk">no tap event, not prevented</a>

1

sapevo può essere una cattiva idea, ma ho appena testato questo in Chrome

$('*').on('tap',function(e){ 
    e.preventDefault(); 
}); 

$('#element').on('tap', function(){ 
    // some code .. 
}); 

e se non hai bisogno di questo per tutti gli elementi:

$('*').not('#aCertainElement').on('tap',function(e){ 
    e.preventDefault(); 
});