javascript - 返回后功能仍在运行

Question

我正在使用 RobotJS 将颜色选择器添加到我的 Electron 应用程序，当用户单击按钮时，.click() 会触发我的函数，该函数专注于输入(隐藏的 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

您将在用户单击颜色选择器后绑定(bind)模糊事件。您永远不会取消绑定(bind)它，因此每次用户离开 colorSample 元素时它都会继续触发。你有几个选择。

我认为最好的方法是使用 .one而不是模糊，所以事件只触发一次。

例如:

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

或者，您可以命名模糊事件(例如 .on("blur.color-picked") 然后在模糊事件处理程序内部取消绑定(bind)事件(例如 .off("blur .color-picked")

另外值得注意的是，你不必在点击事件内部使用匿名函数，你可以直接传递该函数

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