模拟 raphael js 路径上的点击事件

Question

我有 4 个带有多个路径的 SVG。我在另一个面板中有这个 SVG 的副本（这个 svg 不可点击）。当我点击可点击的 SVG 路径时，我用不同的颜色填充路径。

我创建了一个按钮，用于将第一个 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

Answer 1

我解决了我的问题。我替换了这一行：

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

通过这一行：

region.node.onclick = function () {

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