ロゴとして SVG のボタンがあります。
<div id="measure-representation">
<button type="button" class="btn" data-state="audio">Audio
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" class="svg" height="80px" data-state="audio">
<circle cx="50" cy="50" r="20" stroke="black" stroke-width="1" fill="#80ff00" opacity="1"></circle>
</svg>
</button>
</div>
ボタンには がdata-state="audio"あり、トラブルシューティングを行っているため、SVG も同様です (SVG がデータ状態をサポートしているかどうかは不明です)。ユーザーがボタンをクリックしてdata-stateから取得し、その情報を使用して他のことを実行できるようにしようとしています。問題は、ボタン内の SVG を直接クリックすると、ボタンではなく SVG をクリックしていると見なされることです。( SVG の高さと幅の属性を強制し、ボタンの周囲の部分をクリックしてこれを確認しました。ボタンdata-stateをクリックすると が表示されますが、SVG をクリックしても何も表示されません。
これは私が（バックボーンで）使用しているセレクターコードかもしれないと思いますが、ボタンとSVGのHTMlをどのように構造化するかで解決されるかもしれないと思います。
バックボーン ビューとクリック ハンドラ:
el : $("#measure-representation"), // Specifies the DOM element which this view handles
events : {
"click .btn" : "cycle", //Trying to differentiate and/or
"click .svg" : "cycle" //capture the btn click or the SVG click
},
....
cycle: function(button) {
//This works if I click the button
var buttonNewState = $(button.target).data('state');
//Tried different ways to select the SVG from the JQuery event
var svgNewState = ....
},
関数のパラメーターbuttonはcycleJQuery イベント オブジェクトであるため、$(button.target)[0]クリックしたものの HTML を返します。ボタンの HTML (SVG とパスを含む)、SVG (およびパスを含む)、またはクリックしたパスを返します。data-stateボタンのすべての要素に配置する必要がありますか? data-stateまたは、ボタンを取得するためにバブルアップするには、どのセレクターを使用する必要がありますか?
SVG は単なる円ではないため、font-awesome を代用することはできません。