javascript - 无法在 SVG 路径元素上执行单击事件

Question

我有一个脚本可以生成带有颜色的 map 。我试图在单击其中一个状态时发生一个事件 - 这是使用 jvectormap。

但是，由于某种原因它不起作用。我在其他元素上尝试了一下，点击事件工作正常。如何获取与路径元素一起使用的点击事件？

$(function() {
    var generateColors = function() {
      var colors = {},
          key; 
      for (key in map.regions) {
          values.green.forEach(function(item, i) {
             colors[item] = "#2eb02e";
          });
          values.red.forEach(function(item, i) {
             colors[item] = "#ba0707";
          });
          values.yellow.forEach(function(item, i) {
             colors[item] = "#d2d207";
          });
       }
      return colors;
     },
     map = new jvm.Map({
             map: 'us_lcc_en',
             container: $('#map'),
             series: {
                   regions: [{
                      attribute: 'fill'
                   }]
               }
            });
    map.series.regions[0].setValues(generateColors());
});

并且:

$("path").click(function() {
     console.log("blah blah blah");
});

最好的解决方案是使用 jQuery。

Answer 1

这可能是因为当您导入它时，svg 标记尚未加载到页面上，因此它无法将事件附加到路径元素。

您要做的是将加载事件附加到对象，该对象在加载后触发时将附加您的点击事件。

你可以这样做

$(document).on('click','path',function(){
        alert('You clicked me');
        //Do the stuff
});

或者

<script>
        var a = document.getElementById("somesvg");
        //it's important to add an load event listener to the object, as it will load the svg doc asynchronously
        a.addEventListener("load",function(){
            var svgDoc = a.contentDocument; //get the inner DOM of some.svg
            var delta = svgDoc.getElementById("delta"); //get the inner element by id
            delta.addEventListener("mousedown",function(){alert('hello world!')},false);    //add behaviour
        },false);
</script>

注意 - 请注意，此技术的一个限制是它受到同源策略的限制，因此 some.svg 必须托管在与 html 文件相同的域中，否则内部对象的 DOM 将无法访问。