2016-02-01 8 views
11

hatte ich eine Menge:Überschreibungs Antippereignis mit prevent

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

ich viele Fragen über das tap Ereignis Problem Brennen zweimal durchsucht, und ich mein Problem gelöst e.preventDefault() mit, jetzt habe ich eine Menge:

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

Ok, aber wie gesagt, ich habe viele dieser Anrufe und ich weiß nicht viel, wie jedes Mal e.preventDefault() zu schreiben, dann tippte ich $.fn.tap auf Chrom Konsole ein d es mir gezeigt:

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

Ich habe versucht, es auf diese Weise zu überschreiben:

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

Aber es hat nicht funktionierte, wie es in den vorherigen e.preventDefault() tat.

Ich sehe nichts offensichtliches und ich habe keine Ideen dafür.

Jede Hilfe oder Idee ist willkommen. Danke im Voraus.

+1

'$ .fn.tap' erstellt eine Funktion namens' $ ('# element'). Tap() ', erzeugt kein Ereignis – adeneo

+1

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

+0

versuchen Sie, false zurückzugeben. wenn Sie auf Funktion in jqyer –

Antwort

3

Eine der coolen Funktionen von jQuery (ich benutze normalerweise nicht 'jQuery 'und' cool 'in einem einzigen Satz) ist, dass Sie benutzerdefinierte Verhalten für Ereignisse mit dem Objekt $.event.special angeben können.

Es gibt very little documentation zum Thema, so ein kleines Beispiel wäre in Ordnung. Eine Arbeits Geige des click Ereignis mit (da dies bequemer für mich auf meinem Laptop zu schreiben) can be found here

auf Ihre Anfrage übersetzte alletap Ereignisse zu haben, haben e.preventDefault() vor der eigentlichen Behandlungsroutine aufgerufen wird, würde aussehen wie:

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

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

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

Was dieser Code nicht (tun sollte, da ich nicht wirklich die tap Version oben getestet haben) erzählt jQuery, dass Sie eine spezielle Behandlung für die tab Ereignis wollen, insbesondere Sie möchten einen 'Wrapping-Handler' bereitstellen, der nur den Aufruf e.preventDefault() aufruft, bevor der angegebene Event-Handler aufgerufen wird.

UPDATE: verhindert die Standard tap -Einstellungen überschrieben werden, für zukünftige Besucher


HINWEIS: Bevor Sie zum Ändern des Standardverhaltens der Dinge jeden Versuch zu machen, sollten Sie sich fragen, warum Die Standardeinstellungen funktionieren nicht für Sie. Vor allem, weil das Ändern des Standardverhaltens (= erwartetes Verhalten) Ihr zukünftiges Selbst (oder noch schlimmer, eine andere Person) verärgert, während Sie Ihren Code beibehalten und Funktionen hinzufügen.

Um einen wartbaren (und vorhersehbaren) Fluss in Ihrem Code zu erzeugen, ist die vorgeschlagene Lösung zum Erstellen einer speziellen Fallfunktion ($.fn.tap) tatsächlich eine sehr praktikable Lösung, da sie den Standard nicht beeinträchtigt (= erwartet) Verhalten der Dinge.

Von den Links, die ich zur Verfügung stellte, sollten Sie auch in der Lage sein, Ihren eigenen Ereignistyp zu erstellen (z. B. tapOnly) und es offensichtlicher zu machen, dass einige benutzerdefinierte Arbeiten beteiligt sind. Bei beiden Lösungen müssen Sie jedoch Ihre Ereignisbindungen ändern, was Sie verhindern möchten.

+0

Mann, das ist genial !! .. Ich habe gerade Ihren Code geändert in '$ .event.special.tap.add = function() { ... "weil das' Objekt {tapholdThreshold: 750, emitTapOnTaphold: true} 'ersetzt wurde und das' tap' Ereignis gescheitert ist, aber jetzt funktioniert es perfekt! –

+0

Vielen Dank für die Einführung von 'special'. wohlverdiente Bounty +1 – BenG

+0

Vielen Dank! Ich habe das Codebeispiel aktualisiert, um Ihren Vorschlag @ WashingtonGuedes widerzuspiegeln, der tatsächlich verhindert, dass die anderen Werte überschrieben werden. –

0

Ich hatte ein ähnliches Problem, in dem e.preventDefault() in einigen Fällen funktionieren würde, aber nicht in anderen. Es zeigte keine Fehler und try-catch wurde nicht catch alert angezeigt. Hinzufügen e.stopImmediatePropagation() hat den Trick, für den Fall hilft es jemand

10

Dies ist, wie können Sie Ihre erstellen $.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 - die Standard-tap-Ereignis überschreiben immer e verwenden .preventDefault() anstatt von $ Ändern (Element) .auf ('tap', function() {}) zu $ (Element) .tap (function() {})

Sie könnten ein Delegate-Ereignis zu body für tap hinzufügen, ohne ein Ziel anzugeben. Dies wird dann für alle tap Ereignisse auf dem Körper ausgelöst, die Sie dann überprüfen können, ob das Ziel sein eigenes tap-Ereignis hat, so dass Sie dann .

HINWEIS: Dies funktioniert nicht für delegierte tap Ereignisse wie gezeigt.

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

wusste, dass ich eine schlechte Idee sein kann, aber ich habe gerade dies in Chrome getestet

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

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

und wenn Sie dies nicht für alle Elemente:

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