返回后功能仍在运行

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

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

在我看来，最好的方法是使用 .one 而不是 blur，这样事件只会触发一次。

例如：

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")，然后在模糊事件处理程序内部取消绑定事件（例如.off("blur.color-picked")

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

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