2017-03-19 3 views
1

Ich habe 4 SVG mit mehreren Pfaden. Ich habe eine Kopie auf dieser SVG in einem anderen Panel (diese Svg ist nicht anklickbar). Wenn ich auf den anklickbaren SVG-Pfad klicke, fülle ich den Pfad mit einer anderen Farbe.Click-Ereignis auf Raphael js Pfad simulieren

Ich habe eine Schaltfläche erstellt, um alle Pfade, die auf dem ersten SVG gefärbt sind, in das zweite SVG zu importieren. Dazu muss ich ein Klick-Event auf den guten Pfaden simulieren. Um den übereinstimmenden Pfad zu finden, verwende ich das Attribut d= des Pfades.

Hier ist mein Code Ereignis auf jedem Pfad hinzuzufügen:

function buildEvent(regions, area) { 
    for(var regionName in regions) { 
     (function (region) { 
      region.attr(style); 
      region.node.name = regionName; 
      region.data('clicked', false); 

     region[0].addEventListener("mouseover", function() { 
      if (!region.data('clicked')) region.animate(hoverStyle, animationSpeed); 
     }, true); 

     region[0].addEventListener("mouseout", function() { 
      if (!region.data('clicked')) region.animate(style, animationSpeed); 
     }, true); 

     region[0].addEventListener("click", function() { 
      if (region.data('clicked')) { 
       region.attr("fill", "#ddd"); 
       region.data('clicked', false); 
       json_data[area][region.node.name] = false; 
      }else{ 
       region.attr("fill", "#A8BED5"); 
       region.data('clicked', true); 
       json_data[area][region.node.name] = true; 
      } 
     }, true); 

     })(regions[regionName]); 
    } 
} 

Und hier ist mein Code, wenn ich auf die Schaltfläche Import klicken

$('#btn-import').on('click', function() { 

    $('.tab-pane.active svg path').each(function() { 
     if ($(this).attr('fill') == '#A8BED5') { 
      var to_fill = $("#form svg path[d='" + $(this).attr('d') + "']"); 

      // to_fill.trigger('click'); 
      // to_fill[0].trigger('click'); 
      // to_fill.click(); 
      to_fill[0].click(); 
     } 
    }); 
}); 

Wie Sie habe ich versucht, 4 Möglichkeiten zu sehen Auslöser für mein Klickereignis Ich verstehe nicht, warum das Klickereignis nicht ausgelöst wird. to_fill Variable ist das gute Objekt Ich denke, weil ich das fill Attribut meinen Weg bekommen kann, wenn ich tat:

console.log(to_fill.attr('fill') // output #dddddd 

Antwort

0

ich mein Problem gelöst. Ich ersetzte diese Zeile:

region[0].addEventListener("click", function() { 

Durch diese Zeile:

region.node.onclick = function() { 

Und jetzt kann ich to_fill.trigger('click'); oder to_fill.click();