jscolor picker，如何为按钮使用 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 而不是 type

<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>

jscolor picker，如何为按钮使用 onchange 事件？

jscolor picker, how to use onchange event for a button?

html

javascript

onchange

jscolor