knockout.js 从颜色选择器释放鼠标后调用函数

iyr7buue 于 2022-11-10 发布在其他

关注(0)|答案(1)|浏览(146)

我花了一整天的时间来寻找解决方案，但它没有帮助。所以基本上，我想调用一个函数，一旦鼠标从颜色选择器释放。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>

knockout.js

来源：https://stackoverflow.com/questions/64315320/calling-a-function-once-mouse-is-released-from-colorpicker

1条答案

按热度按时间

lyr7nygr1#

根据MDN：
与其他类型的情况一样，有两个事件可用于检测颜色值的更改：input和change。每次颜色更改时都会在元素上触发input。当用户关闭颜色选择器时会触发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函数不会每500ms被调用一次以上。当然，你可以根据需要增加或减少调用频率。
我在这个例子中使用了Lodash，但是如果您的项目中没有Lodash，它也很容易实现。
JSFiddle

赞(0）回复(0）举报 2022-11-10

我来回答

knockout.js 从颜色选择器释放鼠标后调用函数

1条答案

相关问题

热门标签

最新问答