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而不是模糊，因此事件只会触发一次。

例如：

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

返回后功能仍在运行

1 个答案: