点击事件对firefox不适用于小对象

Question

我在svg中使用path绘制了两个矩形。 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>

这是我的小提琴链接：Sample

我尝试过使用mouseup，mousedown，mousemove，mouseenter事件，但它们都不适用于小矩形。

请帮我解决这个问题。

Answer 1

如果您尝试此代码：

$(document).ready(function(){
 $(this).on('click', function(e){
  alert($(e.target).attr('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>

这会在“点击”事件中选择正确的ID。

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