弹性框中的项目不可交互

Question

我有一个使用 svg 路径生成的交互式地图。每当我单击路径时，都应该出现一个容器，其中包含有关该区域的一些信息和链接。

我遇到的问题是这个容器内的任何内容都不能与之交互(即单击链接)。

容器中的项是使用 JS 从 JSON 文件生成的。 JSON 读取有效，虽然不是在代码笔上，但我不知道为什么(没关系)。您可以在此处查看实时代码。

这是我的代码：https://codepen.io/yasinibraim/pen/YzVVBMm

代码的简短摘要：

• SVG map in svgContainerdiv
• 容器内的响应式信息容器信息div
• 容器内的项目在 clickUAT JS 函数中生成的信息div。在加载 JSON 函数中获取的 JSON。

这就是我生成容器信息内容的方式：

for (let i in actual_JSON){
if(actual_JSON[i].uat == caller){
if(firstItem == 1){
//newElement = document.createElement("ul");
}
header = document.createElement("p");
newElement = document.createTextNode (actual_JSON[i].title);
header.appendChild(newElement);
newElement = document.createElement ("a");
newElement.setAttribute('href',actual_JSON[i].link);
newElement.innerHTML = "Citește";
header.appendChild(newElement);
container.appendChild(header);
}
console.log(actual_JSON[i].Title);
}

Answer 1

你的意思是当你点击一个区域时<div id="containerInfo" class="fadeIn">里面的链接吗？

这是因为容器上有pointer-events: none;，这也会影响子项。

您需要将指针事件添加到元素<a>或者在元素可见时将指针事件添加回#containerInfo。