変更イベントのIE8 addEventListenerは最初のクリックでは機能しません

Question

私は3つのラジオ入力を持っており、その入力を基にしてhtmlページの一部が変更されるサイトを持っています。 IE8を除いてすべてが完璧に機能します（もちろん）。このページの私の問題は、イベントリスナーが「変更」されている入力をクリックすると何も起こりません。イベントが2回目にクリックされるまでです。私はIE8がaddEventListenersを処理しないことを知っていますが、私はこのすべてに対してpollyfillを使用しており、サイト上の他の多くのものに対してaddEventListenersを使用しています。

2番目の注意点は、イベントリスナーを「クリック」イベントに切り替えるとIE8ですべて正常に機能することです。唯一の問題と理由は、「クリック」に切り替えるだけではなく、タブ移動が原因です。私はまだ、ユーザーが適切なUXのためにフォームをタブすることができます。

最後にIE8用のVBでサイトを起動すると、デバッグモードにしてpolyfill.min.jsエラーが見つかるまで、この機能（「クリック」イベントでも）は機能しません。それから私はデバッグをやめることができ、すべてが意図どおりに動作します。私は私の誤りの絵を提供します。私はなぜ、何がそれらを引き起こしているのか分かりません。私の推測は、おそらく第三者の機能性のために引き出す外部スクリプトでしょう。それはまだ分かりません。ここ

関数が呼び出されている方法である関数が呼び出される場合、ここで

は次のとおりです。

function attachToggleReportType (elem) { 
    console.log('Trigger attachToggleReportType'); 
    elem.addEventListener('change', toggleReportType, false); 
} 

そしてここでは、上のベース起こるためのアクションのための主な機能でありますイベント

function toggleReportType() { 
    console.log('Trigger toggleReportType'); 
    var reportOptions = document.querySelectorAll('.report'), 
     reportIncToggle = document.querySelectorAll('.toggle'); 
     console.log(this.getAttribute('data-sample-report-link')); 
    reportSample({ 
     href: this.getAttribute('data-sample-report-link'), 
     src: this.getAttribute('data-sample-report-image'), 
     title: this.getAttribute('data-sample-report-title') 
    }); 

    reportIncToggle.forEach(toggleInclude); 
} 

Answer 1

私の問題のためにolution。それは完璧ではありませんが、今のところ私のためにうまくいきました。かなり変わった問題でした。なぜなら、IE8では、 'change'のタイプのイベントリスナーは常にクリック遅延を持つからです。だから、どのラジオをクリックしても、イベントが発生する唯一の時間は、もう一度画面上のどこかを再度クリックしたときです。 IE8がaddEventListenersを処理しないことは分かっていますが、これに対応するためにpolyfillを使用していました。私はまた、デバッグモードでは、polyfillエラーが発生するので、これはそれに関連する問題かと思います。とにかく、私は今、現代のブラウザを聞く 'change'イベントを含むことでこの問題を解決しました。その後、IE8でオンフォーカスイベントに切り替えました。 2つのイベントタイプがあるという考えが嫌いですが、このバグを解決する唯一の方法でした。また、変更イベントは2回目のクリックでIE8でも機能していたので、ブラウザがこのイベントタイプを処理できるかどうかを検出しようとしても、私にとってはオプションではありませんでした。