1
我有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