处理 input type='color' 上的对话框关闭事件答案

【问题标题】：Handle dialog-close event on input type='color'处理 input type='color' 上的对话框关闭事件
【发布时间】：2017-04-04 14:55:10
【问题描述】：

这是一个默认的(html5)颜色选择器：

<input id='color-picker' type=color value='#ff0000'>

通过单击元素，将打开一个默认的颜色选择器对话框。我可以轻松跟踪颜色变化事件：

$('#color-picker').on('change', function() {
   console.log($(this).val());
});

如何处理对话框窗口关闭事件？例如，当用户点击Cancel按钮时？这里还有jsfiddle。

【问题讨论】：

它会产生模糊吗？
@epascarello blur 在单击时触发事件，因为新窗口打开，并且对 DOM 元素的关注丢失。所以这不是关于“模糊”
我在这里看到了类似的文件上传对话框的解决方案：stackoverflow.com/questions/34855400/…，但该解决方案看起来很重。 :\
关于输入类型颜色可以附加/跟踪的事件，您只能使用“输入”和“更改” - html.spec.whatwg.org/multipage/…

标签： javascript jquery html

【解决方案1】：

不幸的是，确切的功能是不可能的。我什至通读了堆栈链接，似乎无论更改如何，文件都会调用change 事件，而颜色则不会……因此，我将代码添加到了模糊事件中。当用户出于任何原因在编辑颜色后单击关闭该值时，它将检查是否取消。我添加了一个虚假的提交按钮来强制用户这样做。

$('#color-picker').on('blur', function() {
  if ($(this).data("prevColor") == $(this).val()) {
    console.log('cancelled');
  } else {
    //value changed
  }
  updateData.bind(this)();
});

function updateData() {
  $(this).data("prevColor", $(this).val());
}

updateData.bind($("#color-picker"))();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id='color-picker' type=color value='#ff0000'><button>Submit</button>

【讨论】：

嗯，这是一种可能的方法，但远不是最好的。

【解决方案2】：

我已将它用于取消和关闭事件。

    var prevColor;
    $('#color-picker').onchange = function(){
        if (this.value != prevColor){
          prevColor = this.value;
        }
    };

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id='color-picker' type=color value='#ff0000'><button>Submit</button>

【讨论】：