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

Question

我想以编程方式设置颜色选择器值而不触发颜色选择器更改事件

注意：我在更改事件下做一些特定的代码，但是我不需要在代码

设置值后执行那些代码块

我已经尝试了 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>

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

How to avoid firing Onchange event when color picker setvalue programitically

html

javascript

jquery

color-picker

twitter-bootstrap