jscolor选择器，如何为按钮使用onchange事件？

Question

我正在使用来自 East Desire 的 jscolor v2.0.4。一切正常，但如果我使用按钮，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，则它不起作用。我能做什么？

Answer 1

您必须注意示例标记。 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 事件，那么你必须将你的按钮更改为输入类型

或者你可以创建 input type="button" 然后监听 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>