javascript - jscolor picker，如何使用按钮的onchange事件？

Question

我正在使用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>