2

Firefox は、無効な入力要素のイベントをサポートしていません (無効な入力のイベントを参照)。しかし、私がテストした他のすべてのブラウザー (IE8、Chrome、Opera、Safari5) はサポートしています。問題は、イベント委任を介して onClick イベントを使用して、無効な要素を有効にしたいことです (デモ: http://codepen.io/cimmanon/pen/Emkwo )。

推奨される解決策は、無効な要素の上に要素をオーバーレイし、それを使用してクリック イベントをインターセプトすることです。無効な要素のすべてのインスタンスを調べて変更するのは、価値があるよりも面倒なので、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

4

1 に答える 1

1

Firefox と Chrome の 1 つのバージョンでしかテストしていないため、これをテストする必要がありますが、無効な入力がイベントをサポートしているかどうかを正しく検出しているようです (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;
}
于 2013-08-05T21:17:26.610 に答える