手动点击事件仅在第二次点击时触发

Question

我构建了一个小的颜色选择器模块。 但是，只有在第二次调用pickColor时，它才会打开（然后起作用）。 我还尝试将_openColorPicker包装到setTimeout但这也不起作用。 实际上，当我这样做时，拾色器根本没有出现。

我发现有趣的是，绑定到change事件的工作正常，因此$选择器必须已经找到了该元素。

所以我有两个问题：

1）为什么选择器仅在第二次调用_openColorPicker之后才显示？

2）当我在setTimeout包装_openColorPicker调用时，为什么选择器根本没有打开？

编辑：用户右键单击文档，然后单击现在显示的上下文菜单后，将执行_openColorPicker函数。

完整的代码：

const ColorUtils = {

    _initialized: false,

    _openColorPicker: function () {
        $('#color-picker').click();
    },

    pickColor: function (onChangeCallback, context) {
        if (!this._initialized) {
            $('<input/>').attr({
                type: 'color',
                id: 'color-picker',
                display: 'hidden',
                value: '#ffffff'
            }).appendTo('#centralRow');
            this._initialized = true;

            $('#color-picker').on('change', onChangeCallback.bind(context));
        }
        this._openColorPicker();

        // version with timeOut
        const scope = this;
        setTimeout(function () {
             scope._openColorPicker();
        }, 1000);
    }
};

export default ColorUtils;

上面的代码像ColorUtils.pickColor(onColorPicked, this);

Answer 1

看看这个帖子 。 看起来您无法触发对隐形颜色选择器的点击。 该答案建议给元素一个绝对位置并将其放置在屏幕外，如下所示：

position:absolute;
left:-9999px;
top:-9999px;

Answer 2

我试图复制您的情况（据我了解）： JSFIddle

我做了一些改变。 我将$('<input/>')到对象ColorUtils的属性中，并将其附加到具有绝对位置且位于屏幕外部的DOM。

（并且还注释了display:'hidden'因为它要么是display:none还是visibility:hidden ，而且是CSS属性，而不是Html属性）

在文档的右上角，我实例化了选择器（并注册了回调+上下文），然后向DOM添加了一个按钮以再次触发选择器。

它满足您的要求吗？