从颜色选择器释放鼠标后调用函数答案

【问题标题】：Calling a function once mouse is released from colorpicker从颜色选择器释放鼠标后调用函数
【发布时间】：2021-01-26 14:49:00
【问题描述】：

我花了一整天的时间寻找解决方案，但无济于事。所以基本上，一旦从颜色选择器中释放鼠标，我想调用一个函数。每次我滑动或单击颜色选择器时，oninput 似乎都会调用函数，这在更新可观察到的淘汰赛时会导致性能问题。我还尝试了其他使用鼠标事件http://jsfiddle.net/b1Lzo60n/http://jsfiddle.net/7yvfkcdn/ 的参考，但没有帮助。

<html>
<body>
<input type="color" oninput="updateSelectedLabelColor(value)" data-bind="value: KnockoutWrapper.SelectedLabel().FontColour" />
</body>
</html>

<script>
function updateSelectedLabelColor(value) {
            TicketWrapper.SelectedLabel().FontColour(value);
        }
</script>

【问题讨论】：

你尝试过 onmouseup 事件吗？
是的，我做到了，在单击颜色选择器按钮时会触发 mouseup，但在选择颜色时不会触发
为什么不使用 onchange 事件？
on change 事件不适用于颜色类型的输入
onchange 事件有效，但它仅在颜色被拾取并在外部单击时调用。我需要在颜色选择器中选择颜色时调用函数的东西

标签： javascript html jquery knockout.js

【解决方案1】：

根据MDN：

与其他类型一样，有两个事件可以用于检测颜色值的变化：输入和变化。输入每次颜色变化时都会在元素上触发。这当用户关闭颜色选择器时会触发 change 事件。在在这两种情况下，您都可以通过查看来确定元素的新值在它的价值。

因此，如果您想在用户关闭颜色选择器之前获取颜色值，则需要使用input 事件。如果您发现此事件过于频繁地触发并导致性能问题，您应该解除该事件的抖动，使其不会过于频繁地触发：

function ViewModel() {
    var vm = this;
    vm.color = ko.observable('#ff0000');
    vm.updateColor = _.debounce(function(data, event) {
      vm.color(event.target.value);
    }, 500);
}

那么它的作用是确保updateColor 函数每 500 毫秒调用一次不超过一次。您当然可以根据需要提高或降低速率。

我在这个例子中使用了 Lodash，但是如果你的项目中没有 Lodash，它很容易实现。

JSFiddle

【讨论】：