新しい FontAwesome 5 バージョンでは、「SVG with JS」を使用している間、アイコンが非常にきれいに見えます。その副作用は、イベントのバブリング/委任を使用してターゲットを絞る確実な方法を見つけるのが非常に難しいことです。それをクリックしてpathノードを取得する場合もあれば、ノードを取得する場合もありsvgます。
タグsvg内にネストする方法を使用してみましたが、機能しません。彼らはここでAuto-Replace-SVG-Nstiを説明しようとしていますが... 私は何の進展もありません。
iだから私は先に進み、別のものに置き換えられたオリジナルを手動でネストしましたi。<i><i class="far fa-comment-alt"></i></i>. をチェックするevent console.log(e.target.parentElement)と、正しい が得られる場合もあれば、 が得られる場合もあり<i>ます<svg>。これにより、まだヒットしていることがわかりますpathand <svg>。
正しい要素を正確にターゲットにすることができないため、非常に予測できない結果が得られます。このページのすべてのコンテンツは、DB からの PHP クエリまたは DB からの AJAX によって動的に生成されます。この問題に対処するためだけに、同じイベントに対して 2 つの異なるハンドラーを作成する必要がありますか?
バージョンだけでもいいのですが、Web Fonts with CSSバージョンと比べるとJSアイコンがかなり粗いので、JSできればバージョンを使いたいと思います。
ノート
ページがロードされた後に要素が生成されるため、この状況ではイベントバブリングを使用する必要があります。