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

Question

我构建了一个小的颜色选择器模块。但只有在第二次调用pickColor时，它才会打开(然后才能工作)。我还试图将_openColorPicker封装到setTimeout中，但也不起作用。事实上，当我这样做的时候，颜色选择器根本没有出现。

我发现有趣的是，到change事件的绑定是有效的，所以$ selector一定已经找到了元素。

所以我有两个问题：

1)为什么选择器只在第二次调用_openColorPicker之后显示

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

编辑:在用户右键单击文档，然后单击当前显示的上下文菜单之后，将执行_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

查看this post。看起来你不能在一个看不见的颜色选择器上触发点击。该答案建议给元素一个绝对位置，并将其放在屏幕之外，如下所示：

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

Answer 2

我试图复制你的案例(据我所知)：JSFIddle

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

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

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

它能满足你的要求吗？