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事件的按钮？

回答

相关问题