句柄对话框-关闭输入类型=“颜色”的事件

Question

以下是默认(Html5)颜色选择器：

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

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

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

如何处理对话框窗口关闭事件？例如，当用户单击取消按钮时？另外，这是小提琴。

Answer 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>

​

Answer 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>

​