返信後に関数がまだ実行中

Question

RobotJSを使用してElectronアプリにカラーピッカーを追加しています。ユーザーがボタンをクリックすると、.click()が、入力時にプロキシとして機能する入力（hidden opacity: 0; height: 0px; width: 0px;）ユーザはカーソル位置で色をフェッチするために（.blur()）をクリックします。次に、その色を別の入力フィールドに入れて戻ります。ただし、ユーザーが返された入力フィールドをクリックしてからクリックすると、.blur()が引き続きトリガーされます。なぜこれが、どうすればそれを防ぐことができますか？

<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; 
    }); 
} 

ありがとう！

Answer 1

ユーザーがカラーピッカーをクリックすると、blurイベントがバインドされます。ユーザーがcolorSample要素を離れるたびに、バインドを解除することはありません。いくつかの選択肢があります。

私の意見では、ぼかしの代わりに.oneを使用するのが最も良いので、イベントは1回だけ発生します。例については

：

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; 
    }); 
} 

代わりにあなたはblurイベントハンドラの内部で、その後例えば.on("blur.color-picked")（blurイベントを名前空間ができ、イベントをバインド解除（例えば.off("blur.color-picked")

あなたがいないことも注目に値しますクリックイベント内で無名関数を使用する必要がある場合は、直接関数を渡すことができます。

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