Question

Firefox不支持禁用输入元素上的事件（请参阅：Event on a disabled input），但我测试的其他浏览器（IE8，Chrome，Opera，Safari5）都支持它。问题是，我希望通过事件委派使用onClick事件来启用已禁用的元素（演示：http://codepen.io/cimmanon/pen/Emkwo）。

建议的解决方案是将一个元素覆盖在disabled元素的顶部，并使用它来拦截click事件。我想通过JavaScript注入覆盖，因为通过并修改我的禁用元素的所有实例比它的价值更麻烦（加上它污染我的标记，我不喜欢）。

有没有办法检测浏览器是否支持我正在做的事情，只在这些浏览器中注入叠加层？我以为我可以做这样的事情，但Firefox给出了误报：

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

你应该对此进行测试，因为我只在一个版本的Firefox和Chrome中测试过，但它似乎正确检测禁用的输入是否支持事件（dispatchEvent在禁用的输入上引发异常）：

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;
}

如何检测对已禁用元素的事件的支持？

1 个答案: