How can I detect support for events on disabled elements?

Question

Firefox does not support events on disabled input elements (see: Event on a disabled input) but every other browser I've tested (IE8, Chrome, Opera, Safari5) do support it. The trouble is, I wish to use an onClick event via event delegation to enable the disabled elements (demo: http://codepen.io/cimmanon/pen/Emkwo).

The recommended solution is to overlay an element on top of the disabled element and use it to intercept the click events. I'd like to inject the overlay via JavaScript, since going through and modifying all instances of my disabled elements is more trouble than it's worth (plus it pollutes my markup, which I don't really like).

Is there a way to detect whether or not a browser supports what I'm doing and only inject the overlay in those browsers? I thought I could do something like this, but Firefox gives a false positive:

var foo = document.getElementById('foo');
foo.onclick = function(e) {
  return true;
}
if (foo.onclick()) {
  console.log('browser supported!');
}

http://codepen.io/cimmanon/pen/HCfJi

Answer 1

You should test this, as I've only tested it in one version of Firefox and Chrome, but it seems to correctly detect whether disabled inputs support events (dispatchEvent throws an exception on a disabled input):

function hasEventsOnDisabled(){
  var input = document.createElement('input');
  input.disabled = true;

  var e = document.createEvent('HTMLEvents');
  e.initEvent('click', true, true);

  try{
    input.dispatchEvent(e);
    return true;
  }catch(err){}

  return false;
}