如何在剑道颜色选择器上创建取消按钮的功能

Question

我正在尝试剑道kendoColorPicker
带有更改事件
当改变颜色并点击应用按钮时，它的工作。（更改字体颜色）
但我想设置如果点击取消按钮，然后设置默认字体颜色
知道怎么做的吗
这是一个简单的尝试

<div id="example" class="k-content">
            <label for="hsv-picker">Font:</label>
                <input type="color" id="picker" value="#000000" data-role="colorpicker">
     <script>
        kendo.init($("#example"));
        $("#picker").each(function(){
            var colorPicker = $(this).data("kendoColorPicker");
            colorPicker.bind({
                change: function(e) {
                $("#example").css("color",e.value);
                    console.log("Change in picker #" + this.element.attr("id") + " :: " + e.value);
                }
            });
        });
    </script>
</div>

提前谢谢。

Answer 1

默认情况下，取消按钮会将颜色恢复到以前的值，所以我不确定是否有必要控制取消按钮的点击。您可以将选择器的初始值设置为所需的默认值。

但是，您需要使用close事件。下面是一个例子。

$('#hsv-picker').kendoColorPicker({
    select: function (e) {
        log("Select in picker #" + this.element.attr("id") + " :: " + e.value);
    },
    change: function (e) {
        log("Change in picker #" + this.element.attr("id") + " :: " + e.value);
    },
    open: function () {
        log("Open in picker #" + this.element.attr("id"));
    },
    close: function (e) {
        log("Close in picker #" + this.element.attr("id"));
    }
});

无论是否发生更改，只要控件关闭，就会关闭。要只捕获取消单击，您必须设置代理单击事件，或者在open、change和close事件之间使用一些标志。下面是一个处理委托单击事件的示例。

$('body').on('click', '.k-controls button.cancel', function(){
    alert('Cancel clicked');
});

这是一把小提琴。