小規模なオブジェクトの場合、クリックイベントがfirefoxで機能しない

Question

svgのパスを使用して2つの長方形を描画しました。 Clickイベントは大きな矩形でうまく機能しますが、小さな矩形では機能しません。大きな長方形のため

画像：

はここに私のコードスニペットです： `

<svg id="svgDocument" style="overflow: hidden; z-index: 0; float: left; position: relative; height: 600px; width: 900px; 
margin-top: 0px; margin-left: 0px;" xmlns="http://www.w3.org/2000/svg"> 
<g id="rootGroup" transform="scale(8192) translate(-117.71870117262006, -202.511474609375)"> 
<path id="data" stroke-linecap="square" stroke-linejoin="round" d="M117.7315673828125,202.5401611328125,117.7315673828125,202.5142822265625, 
117.763427734375,202.5142822265625,117.763427734375,202.5401611328125Z" fill="Blue" stroke-width="0.0006103515625" stroke="red" class="mapShape" 
nodeValue="Blue"/> 
<path id="data1" stroke-linecap="square" stroke-linejoin="round" d="M117.7685546875,202.54638671874997,117.7685546875,202.54309082031253,117.7730712890625, 
202.54309082031253,117.7730712890625,202.54638671874997Z" fill="Blue" stroke-width="0.0006103515625" stroke="red" class="mapShape" nodeValue="Blue"/> 
</g> 
</svg> 
<script> 
document.getElementById('data').addEventListener('click', function (e){ 
    alert('Event triggered for big rect'); 
    }); 
document.getElementById('data1').addEventListener('click', function (e){ 
     alert('Event triggered for small rect'); 
    }); 
</script> 

はここに私のバイオリンのリンクです：私はのmouseupを使用してみましたがSample

、 mousedown、mousemove、mouseenterイベントがありますが、いずれも小さな四角形では機能しません。

親切に私はこの問題を解決するのに役立ちます。あなたはこのコードをしようとした場合

Answer 1

は：

$(document).ready(function(){ 
$(this).on('click', function(e){ 
    alert($(e.target).attr('id')); 
}); 
}); 

は、あなたが与えたパスは間違っている：これは 'クリック' イベントの正しいIDを選択

<svg id="svgDocument" style="overflow: hidden; z-index: 0; float: left; position: relative; height: 600px; width: 900px; 
margin-top: 0px; margin-left: 0px;" xmlns="http://www.w3.org/2000/svg"> 
<g id="rootGroup"> 
<path id="data" stroke-linecap="square" stroke-linejoin="round" d="M150 0 L75 200 L225 200 Z" fill="Blue" stroke-width="0.0006103515625" stroke="red" class="mapShape" 
nodeValue="Blue"/> 
</g> 

<g id="g2"> 
<path id="data1" stroke-linecap="square" stroke-linejoin="round" d="M250 0 L75 200 L225 200 Z" fill="Red" stroke-width="0.0006103515625" stroke="red" class="mapShape" nodeValue="Blue"/> 
</g> 
</svg> 

。

jsfiddle：https://jsfiddle.net/k4p6suy4/1/