Question

我的网站上有一个用于选择美国州的svg。格式为：

<svg...>
  <a xlink:href="...">
    <polygon ...><title>{stateName}</title></polygon>
  </a>
</svg>

经过几个小时的头痛试图弄清楚为什么点击链接导致同一站点上的其他脚本出现问题，我将问题范围缩小到当目标是svg中的锚点时未传递给这些函数的事件。

所以我创建了一个没有其他脚本的单独页面，并通过创建以下函数进行了实验：

<script type="text/javascript">
(function($){
  $(document).ready(function(){
      $('svg a').click(function(event){
          if(event.target.tagName == 'polygon'){
              var target = $(this).parent();
              alert('target: ' + dump(target));
          }else{
              alert('event: ' + dump(event.target));
          }
      });
  });
})(jQuery);
</script>

注意：dump（）函数是一个自定义函数，用于输出对象和数组的内容。

我的第一个版本的代码只输出event.target.tagName，它总是“多边形”，即使我绑定点击的对象是锚点。所以我修改它以获取多边形的父级但返回svg。这就像锚不存在。

为什么我似乎看不到该函数的事件不包含对锚点的任何引用？如果锚点在div内部，我该如何表现呢？

我尝试了一个jQuery SVG插件，但没有做任何事情。

TL; DR / Clarification 问题不在于锚点不起作用，单击它会将您带到xlink：href中定义的页面。但是任何jQuery代码绑定到单击svg中单击这些锚点时触发的事件，都会将事件视为未定义或不包含预期的锚点对象数据。

如何为这些锚点获取适当的事件对象？

编辑：最后让jsfiddle加载：http://jsfiddle.net/fja4Lt0L/

不同浏览器中当前行为的说明：

FireFox：问题如
Chrome / Safari：什么都不做
IE：跟随链接，无论附加到点击事件的脚本

这些都不是脚本所期望的行为或编码人员想要的行为。

Answer 1

在SVG中，只有图形元素（线条，矩形等和文本）可以成为事件的目标。如果您在容器上指定它，例如一个<g>或<a>元素，然后他们所有的孩子成为目标。

只需调用.parentElement（如果您正在使用原始DOM）或.parent()（如果您正在使用jQuery），无论目标是什么，都会反复调用。

Here's an example或jquery and .parent

在SVG中获取锚元素

1 个答案: