Question

这是默认的（ html5 ）颜色选择器：

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

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

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

如何处理对话窗口关闭事件？例如，当用户点击取消按钮时？此外还有jsfiddle。

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>

处理输入类型=＆＃39;颜色＆＃39;上的对话框关闭事件

2 个答案: