我的网站上有一个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 /澄清问题不是锚不起作用，单击它会将您带到xlink：href中定义的页面。但是任何绑定到单击事件的jQuery代码，这些事件在单击svg中的这些锚点时都会触发，或者事件未定义或不包含预期的锚点对象数据。
如何获得这些锚点的适当事件对象？
编辑：最终让jsfiddle加载：http : //jsfiddle.net/fja4Lt0L/
当前在不同浏览器中的行为的说明：
这些都不是脚本预期的行为，也不是编码人员预期的行为。
在SVG中，仅图形元素（线，矩形等和文本）可以成为事件的目标。如果在容器（例如<g>或<a>元素）上指定它，则其所有子项均成为目标。
只需反复调用.parentElement（如果您使用的是原始DOM）或.parent()（如果您使用的是jQuery）目标上的任何对象，直到获得锚点元素。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句