Funktion läuft immer nach der Rückkehr

Question

Ich bin eine Farbe Picker zu meiner Electron App mit RobotJS, wenn der Benutzer die Schaltfläche klickt ein .click() löst meine Funktion, die auf eine Eingabe konzentriert (versteckt opacity: 0; height: 0px; width: 0px;), die als Proxy für, wenn Benutzer klickt(), um die Farbe an der Cursorposition abzurufen. Dann fügt sie diese Farbe in ein anderes Eingabefeld ein und kehrt zurück. Wenn der Benutzer dann jedoch zurück in das zurückgegebene Eingabefeld klickt und dann ausklickt, wird weiterhin die ausgelöst. Warum ist das und wie kann ich es verhindern?

<input class="clickProxy" style="opacity: 0; height: 0px; width: 0px;" /> 

$('.color_picker').click(function(){ 
    getColorAtPointer(); 
}); 

function getColorAtPointer(){ 
    $('input[name="colorSample"]').focus(); 

    $('input[name="colorSample"]').blur(function(){ 
     var mouse = robot.getMousePos(); 
     $('input[name="colorSample"]').val('#'+robot.getPixelColor(mouse.x, mouse.y)); 
     return; 
    }); 
} 

Vielen Dank!

Answer 1

Sie binden das Blur-Ereignis, nachdem der Benutzer auf die Farbauswahl geklickt hat. Sie können die Bindung nicht lösen, sodass sie jedes Mal ausgelöst wird, wenn der Benutzer das colorSample-Element verlässt. Sie haben ein paar Optionen.

Die beste, meiner Meinung nach, ist .one anstelle von Unschärfe zu verwenden, so dass das Ereignis nur einmal ausgelöst wird.

Beispiel:

function getColorAtPointer(){ 
    $('input[name="colorSample"]').focus(); 

    $('input[name="colorSample"]').one("blur", function(){ 
     var mouse = robot.getMousePos(); 
     $('input[name="colorSample"]').val('#'+robot.getPixelColor(mouse.x, mouse.y)); 
     return; 
    }); 
} 

Alternativ können Sie die Unschärfe Ereignis Namensraum (zB .on("blur.color-picked") dann innerhalb der Unschärfe-Ereignishandler das Ereignis unbind (zB .off("blur.color-picked")

Es ist auch erwähnenswert, dass Sie dies nicht tun müssen Sie eine anonyme Funktion innerhalb von Klickereignissen verwenden, können Sie die Funktion direkt übergeben

$('.color_picker').click(getColorAtPointer);