Handle dialog-close event on input type='color'

Question

Here is a default(html5) color selector:

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

By click on the element, a default color-picker dialog opens. I can easily track the color change event:

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

How dialog window close event can be handled? For example, when user clicks Cancel button? Here is jsfiddle additionally.

Answer 1

Unfortunately, the exact functionality is not possible. I even read through the stack link, it seems that file calls the change event regardless of change, whereas color does not... So, I added the code to the blur event instead. When the user click off the value after editing color for any reason, it will check for cancel. I added a phony submit button to force the user to do it.

$('#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

I've used this for the Cancel and Close Events.

    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>