模擬拉斐爾js路徑上的點擊事件

我有4個SVG與多個路徑。我在另一個面板上有一個SVG副本（這個svg不可點擊）。當我點擊可點擊的SVG路徑時，我用不同的顏色填充路徑。模擬拉斐爾js路徑上的點擊事件

我創建了一個按鈕，用於將第一個SVG上着色的所有路徑導入第二個SVG。爲此，我必須模擬好路徑上的點擊事件。要找到匹配的路徑，我使用路徑的屬性d=。

這裏是我的代碼，每條路徑上添加事件：

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]); 
    } 
}

這裏是我的代碼時，我就進口按鈕

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

單擊正如你可以看到我試過4種方式觸發我的點擊事件。我不明白爲什麼點擊事件沒有被觸發。 to_fill變量是很好的對象我想是因爲我可以得到我的路的fill屬性如果我這樣做：

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

來源

2017-03-19 John

我解決我的問題。我換成這一行：

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

通過這條線：

region.node.onclick = function() {

現在我可以用to_fill.trigger('click');或to_fill.click();

來源

2017-03-19 17:38:51 John

模擬拉斐爾js路徑上的點擊事件

回答

相關問題