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> 

私はonchangeにonFineChangeを変更する場合、それは動作しません。私に何ができる？

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'); 
      } 
     } 
    }, 

を発射するためのものです：あなたがのonchangeイベントをしたいのであれば、あなたが入力タイプに

をあなたのボタンを変更する必要がhttps://github.com/EastDesire/jscolor/blob/master/jscolor.js#L671

かプラグインはタイプではなく入力のみを気にするので、入力タイプ= "ボタン"を作成してイベントを聞くことができます

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