手動點擊事件僅觸發第二次點擊

我構建了一個小型顏色選擇器模塊。但是當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

手動點擊事件僅觸發第二次點擊

回答

相關問題