Click 事件在 firefox 上对小对象不起作用答案

【问题标题】：Click event doesn't work on firefox for small objectsClick 事件在 firefox 上对小对象不起作用
【发布时间】：2016-10-12 23:21:46
【问题描述】：

我使用 svg 中的路径绘制了两个矩形。单击事件在大矩形上工作正常，但在小矩形上同样不起作用。

更大矩形的图像：

这是我的代码 sn-p： `

<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 事件，但它们都不适用于小矩形。

请帮我解决这个问题。

【问题讨论】：

您是否尝试过将事物绘制得更接近您实际使用的比例，即删除 transform="scale(8192) translate(-117.71870117262006, -202.511474609375)" 并适当地修复内容。
我刚刚看了看，我预感在 Firefox 中点击会被父 <svg> 捕获。例如。尝试右键单击检查元素，它将选择父 svg，而不是子元素。我不确定为什么会发生这种情况。

标签： javascript jquery html svg

【解决方案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/

【讨论】：