jscolor選擇器，如何使用onchange事件的按鈕？

我正在使用來自East Desire的jscolor v2.0.4。所有工作正常，但如果我使用按鈕onchange事件不起作用。jscolor選擇器，如何使用onchange事件的按鈕？

在網頁上的onchange事件示例中是使用的輸入字段。但我使用了一個按鈕元素，這裏只有可能的事件onFineChange。爲什麼？

這裏是我的代碼：

<button style="border:2px solid black; width:80px; height:30px" class="jscolor {valueElement:'chosen-value', closable:true,closeText:'Close me!', onFineChange:'updateColor(this)'}">Pick color</button> 
R, G, B = <span id="rgb"></span> 

<script> 
function updateColor(picker) { 
    document.getElementById('rgb').innerHTML = Math.round(picker.rgb[0]) + ', ' + Math.round(picker.rgb[1]) + ', ' + Math.round(picker.rgb[2]); 
} 
</script>

如果我改變onFineChange到onchange那麼它不工作。我能做什麼？

來源

2017-06-14 Pascal

爲什麼不使用'onclick'事件？按鈕不支持'onchange'事件，如果你仔細想想，它們在技術上有一個'價值'來改變。你可以看到[onchange]上的'onchange'支持的元素[https://www.w3schools.com/jsref/event_onchange.asp] –

onchange和onFineChange在jscolor實現中。 onFineChange事件觸發更頻繁，如果我拖動顏色字段。 onchange事件僅在顏色選擇器中釋放鼠標按鈕後觸發。我需要這個。 – Pascal

您必須注意示例標記。 onchange是輸入元素的一部分，不是jscolor實現的一部分。

<input class="jscolor" onchange="update(this.jscolor)" value="cc66ff"> 

<input class="jscolor {onFineChange:'update(this)'}" value="cc66ff">

如果你看到標記，那麼你就會明白onchange不是jscolor的實現。

如果你檢查jscolor的源代碼，你也會發現。的onChange意味着火只在inpyt類型的元素，而不是按鈕

dispatchChange : function (thisObj) { 
     if (thisObj.valueElement) { 
      if (jsc.isElementType(thisObj.valueElement, 'input')) { 
       jsc.fireEvent(thisObj.valueElement, 'change'); 
      } 
     } 
    },

裁判：https://github.com/EastDesire/jscolor/blob/master/jscolor.js#L671

所以，如果你想onchange事件，那麼你必須改變你的按鈕，輸入型

或你可以創建輸入類型=「按鈕」，然後聽onchange事件，因爲插件只關心輸入而不是類型

<input class="jscolor" id="btnPicker" type="button"> 
<script> 

document.getElementById('btnPicker').addEventListener('change', function(e){ 
    updateColor(this.jscolor) 
}) 
function updateColor(picker) { 
    document.getElementById('rgb').innerHTML = Math.round(picker.rgb[0]) + ', ' + Math.round(picker.rgb[1]) + ', ' + Math.round(picker.rgb[2]); 
} 
</script>

來源

2017-06-14 16:59:28 karthick

感謝您的回答和解釋。顏色選擇器上的鼠標按鈕被釋放後，是否有機會觸發事件？ – Pascal

你可以創建一個輸入類型的按鈕，並收聽虛假事件onchange。讓我用該代碼更新答案 – karthick

非常感謝您的幫助。 **所有工作正常** :)它可以幫助我完成我的物聯網項目，通過WiFi控制LED條紋。 – Pascal

jscolor選擇器，如何使用onchange事件的按鈕？

回答

相關問題