javascript - 当颜色选择器以编程方式设置值时，如何避免触发 Onchange 事件

Question

我想以编程方式设置颜色选择器值，而不触发 Colorpicker On Change 事件

注意: 我正在更改事件下执行一些特定代码， 但我不需要在代码中设置值后执行这些代码块

我尝试过 e.stoppropagation 和 e.preventdefault 但最终没有成功

function resetColor(){
 //Some code...
 $("#" + affectColorAreaId).colorpicker('setValue', defaultValue);
 //Some code...
}

Answer 1

您可以使用.data方法来检查它是否来自重置事件并相应地设置或删除其值，但我在文档中找不到任何内容。考虑以下因素:

const defaultValue = '#000000';
$('#picker').colorpicker({}).on('changeColor', function(event) {
  if (!$(this).data('isFromReset'))
    console.log('from color change!');
  else
    $('#picker').removeData('isFromReset');
});

function reset() {
  console.log('from reset!');
  $('#picker').data('isFromReset', true).colorpicker('setValue', defaultValue);
}

.as-console-wrapper {
  max-height: 50px !important;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-colorpicker/2.5.3/js/bootstrap-colorpicker.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-colorpicker/2.5.3/css/bootstrap-colorpicker.css" rel="stylesheet" />

<input id="picker" />
<button onclick="reset();">reset</button>