Question

我有SVG用作绘图表面。它包含各种子元素，在这种情况下，我关心的是circle。为了能够一直画到svg的边缘，我已将padding: 5px添加到svg元素，该元素按预期工作，只有一个小皱纹。

点击circle元素中svg上的活动返回event.target.nodeName == circle。但点击填充中的circle上的点击事件会返回event.target.nodeName == svg，这有效地使circle无法选择（因为我无法点击它）。有没有办法在元素的填充中看到实际的event.target？或者我是否需要构建一个变通方法（即映射我放置的圆圈的坐标，并每次检查svg event.currentTarget对这些坐标？

更新：这是一个说明问题的小提琴。单击左侧圆圈（填充内部）和event.target.nodeName == svg;点击右边的圆圈（在svg中）和event.target.nodeName == circle。

https://jsfiddle.net/r5jd87n6/2/

Answer 1

在添加溢出后，似乎至少在Firefox上运行正常：外部<svg>元素可见。

＆＃13;

$('#parentsvg').click(function(event){
	$('#output').html("event.target.nodeName: " + event.target.nodeName);
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
  <svg id="parentsvg" width="200" height="200" style="padding:15px; overflow:visible" >
    <circle id="clickableCircle" cx="100" cy="50" r="6" fill="#333333"></circle>
    <circle id="unClickableCircle" cx="-5" cy="50" r="6" fill="#333333"></circle>
  </svg>
</div>
<div id="output"></div>

</div>

＆＃13;

SVG填充中的event.target？

1 个答案: