Zum Umschalten klicken Sie auf Handler in Javascript

Ich habe eine HTML-Schaltfläche, auf die lege ich ein Ereignis, mit jQuery ist bind():

$('#mybutton').bind('click', myFirstHandlerFunction);

In myFirstHandlerFunction möchte ich diesen handler zu ersetzen, selbst mit einer neuen hf mySecondHandlerFunction wie diese:

function myFirstHandlerFunction(e) {
    $(this).unbind('click', myFirstHandlerFunction).bind('click', mySecondHandlerFunction);
}

In der zweiten click-handler, mySecondHandlerFunction möchte ich wählen Sie mit der Taste wieder in den ursprünglichen Zustand: Bindung die mySecondHandlerFunction handler und befestigen Sie den original-handlermyFirstHandlerFunction:

function mySecondHandlerFunction(e) {
    $(this).unbind('click', mySecondHandlerFunction).bind('click', myFirstHandlerFunction);
}

Dies funktioniert gut, außer ein kleines detail: da das click-Ereignis nicht noch vermehrt durch die einzelnen button-Klick-Handler des click-Ereignisses übergeben wird, auf die Schaltfläche weiter klicken Sie auf handler,, die passiert werden die handler, war nur gebunden in der vorherigen Prozedur. Das Ergebnis ist mySecondHandlerFunction wird sofort ausgeführt, nachdem myFirstHandlerFunction ausgeführt wird.

Dieses problem kann leicht gelöst werden, durch aufrufen e.stopPropagation() in jeder Hundeführer, aber das hat den negativen Nebeneffekt, stornieren Sie alle anderen click-Handler, eventuell angebracht wurden, unabhängig voneinander.

Gibt es einen Weg, um sicher und konsequent Umschalten zwischen zwei click-Handler, ohne zu stoppen die Ausbreitung der click-Ereignis?

Warum verwenden nicht Sie eine Flagge, um zu überprüfen, welcher handler aufzurufen und bringen Sie immer eine master-handler.

InformationsquelleAutor Nathan Friend | 2013-01-03

8

Update: Da diese form der toggle() entfernt wurde, in jQuery 1.9, die Lösung unten funktioniert nicht mehr. Sehen diese Frage für
alternativen.

Sieht es aus wie toggle() würde Ihr problem lösen:
```
$("#mybutton").toggle(myFirstHandlerFunction, mySecondHandlerFunction);
```
Den obigen code wird die Registrierung myFirstHandlerFunction und mySecondHandlerFunction genannt zu werden, auf Alternative Klicks.

Ich wusste nicht, dass es diese Möglichkeit überhaupt gibt! Sehr cool.
Die .toggle(Event) war abgeschrieben in jQuery 1.8 und entfernt 1.9+. Dies ist nicht mehr eine praktikable option. -Quelle
getan, vielen Dank für das heads-up.

InformationsquelleAutor Frédéric Hamidi
6

Einfach ein boolean schaltet die Funktionalität des handlers, es gibt keine Notwendigkeit, zu jonglieren, die hf-hören:
```
$('#mybutton').bind('click', myHandlerFunction);
var first = true;

function myHandlerFunction(e) {
    if(first){
        //Code from the first handler here;
    }else{
        //Code from the second handler here;
    }
    first = !first; //Invert `first`
}
```
Da bist du mit jQuery, .toggle ist wahrscheinlich besser, aber +1 für die Logik zeigt auf, wie dies zu tun, ohne die Verwendung von .toggle
So kommentierte oben toggle ist veraltet in 1.9 entfernt und in 1.10. Verwenden Sie es nicht.
Ich mag dieses besser mit data-Attribut statt global : stackoverflow.com/a/2459225/781695

InformationsquelleAutor Cerbrus

Ich schaute auf das heute, und klar, es gab noch nicht einen Weg, dies zu tun, ohne eine Globale variable aufgeführt. Ich kam mit der folgenden Adressen hinzufügen, um eine ESRI-basemap, aber es würde funktionieren in der Regel auch:

function addLocationClickHandler() {
    var addLocationClick = overviewMap.on('click', function (event) {
        addLocationClick.remove();
    })
    $('#locationAddButton').one('click', function (cancelEvent) {
        addLocationClick.remove();
        $('#locationAddButton').on('click', addLocationClickHandler)
    });
}

$('#locationAddButton').on('click', addLocationClickHandler)

Dies sollte Ihnen ermöglichen, setzen etwas anderes in dem Abschnitt, wo Sie überschreibt den click-handler, und es nicht nötig eine Globale variable.

InformationsquelleAutor BBQ Singular

-1

Dies würde helfen, hinzufügen von Daten-click-state-Attribut auf Ihre Schaltfläche

$(document).ready(function(){

$('#mybutton').on('click',function(){

if($(this).attr('data-click-state') == 1) {  
$(this).attr('data-click-state', 0)
myFirstHandlerFunction();

} else {
$(this).attr('data-click-state', 1)
mySecondHandlerFunction();
}

});

});

Ich mag diesen Ansatz!

InformationsquelleAutor Mike Tavish

-2

Wie diese:
```
$(this).bind('click', myMasterHandler);

handler = 0;

function myMasterHandler(e) {
    if(handler == 0) {
        myFirstHandler(e);
        handler = 1;
    } else {
        mySecondHandler(e);
        handler = 0;
    }
}
```
Wieso der downvote?
Der downvote ist nicht von mir, aber kann es im Zusammenhang mit handler Globale statt lokale, oder die Nutzung von 0 und 1 statt einem boolean, oder auf die Tatsache, dass der aktuelle Wert von this ist nicht richtig an den Handler.
Danke Mann...

InformationsquelleAutor ATOzTOA

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.