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

我构建了一个小型颜色选择器模块。但是当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);

来源

2016-02-18 MJB

退房this post。看起来你不能点击一个不可见的颜色选择器。这个问题的答案建议给该元素的绝对位置，并把它关掉屏幕，像这样：

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

来源

2016-02-18 19:36:22 Fuzzley

嗯，不这样做。仍然只有第二次点击后。此外，我可以触发点击，而不是第一次。如果我将元素设置为显示，它的工作原理是相同的：none例如 – MJB

我试图复制你的情况下（我的理解）：JSFIddle

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

（而且还评论display:'hidden'，因为它要么display:none或visibility:hidden和CSS属性，而不是HTML属性）

右侧集团公司的文件我实例化选择器（和注册回调+上下文），然后添加按钮到DOM以再次触发选择器。

它是否满足您的要求？

来源

2016-02-19 01:12:35 OxyDesign

我最终通过重构代码来修复它！初始化为一个init函数，在导出它之前被调用一次。事情是我不是100％确定事情发生的原因，这是我最初的问题。似乎没有人可以给出提示 – MJB

在我看来，所有的麻烦都来自您触发点击事件的事实。只有在它最初由点击事件触发时它才能工作。这就是为什么我将输入附加到DOM之前。 – OxyDesign

好，问题不在于触发点击事件本身。即使我使用MouseEvent构造函数（这是本机事件），我也会得到相同的行为。问题是为什么我不能创建元素，在一次调用中追加它并触发点击，而是在第二次点击时触发点击。当回调工作时，这个元素已经是第一次了，所以它不是“尚未完成”的问题。 – MJB

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

回答

相关问题