javascript - Can't do a click event on an SVG path element - Stack Overflow

admin管理员组

文章数量:1353186

I have a script that generates a map with colors on it. I am trying to have an event happen when I click on one of the states - this is using jvectormap.

However, for some reason it doesn't work. I try it on other elements, and the click event works fine. How do I get a click event to work with a path element?

$(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());
});

AND:

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

Preferably the solution would be using jQuery.

I have a script that generates a map with colors on it. I am trying to have an event happen when I click on one of the states - this is using jvectormap.

However, for some reason it doesn't work. I try it on other elements, and the click event works fine. How do I get a click event to work with a path element?

$(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());
});

AND:

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

Preferably the solution would be using jQuery.

• javascript
• jquery
• svg

Share Improve this question Follow edited Apr 20, 2015 at 3:43 dbarnes 1,86333 gold badges1818 silver badges3333 bronze badges asked Apr 20, 2015 at 3:35 Steven MatthewsSteven Matthews 11.4k5050 gold badges137137 silver badges253253 bronze badges 5

• Can you fiddle the problem? – Guruprasad J Rao Commented Apr 20, 2015 at 3:58
• It is a little difficult as I have local js resources. – Steven Matthews Commented Apr 20, 2015 at 4:03
• are you importing the svg from a file or have you written svg markup on your page?? – Guruprasad J Rao Commented Apr 20, 2015 at 4:14
• It is being generated dynamically by jVectorMap. I just tried changing my binding method to .on() and that doesn't seem to be working either. – Steven Matthews Commented Apr 20, 2015 at 4:15
• <script>$("path").on("click", "path", (function() { console.log("blah blah blah"); alert("blah"); }));</script> – Steven Matthews Commented Apr 20, 2015 at 4:15

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 8

This might be because when you import it the svg markup isn't loaded on the page yet so it cannot attach events to the path elements.

What you have to do is attach a load event to the object that when fired will attached your click events once it has been loaded.

You can either do this

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

Or

<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>

NOTE - Note that a limitation of this technique is that it is restricted by the same-origin policy, so some.svg must be hosted on the same domain as the html file, otherwise the inner DOM of the object will be inaccessible.

本文标签： javascriptCan39t do a click event on an SVG path elementStack Overflow