flexbox 内的项目不可交互答案

【问题标题】：Items inside flexbox not interactableflexbox 内的项目不可交互
【发布时间】：2021-07-18 11:10:09
【问题描述】：

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

我遇到的问题是这个容器内的任何东西都不能与之交互（即点击链接）。

容器内的项目是使用 JS 从 JSON 文件生成的。 JSON 阅读工作，虽然没有超过 codepen，但我不知道为什么（没关系）。你可以看到代码直播here。

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

代码摘要：

svgContainer div 内的 SVG 地图
containerInfo div 内的响应式信息容器
在 clickUAT JS 函数中生成的 containerInfo div 中的项目。 JSON 在 loadJSON 函数中获取。

这就是我生成 containerInfo 内容的方式：

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

【问题讨论】：

标签： javascript html css flexbox

【解决方案1】：

您是指点击区域时<div id="containerInfo" class="fadeIn"> 内的链接吗？

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

您要么需要将指针事件添加到<a> 元素，要么将指针事件添加回#containerInfo，当它变得可见时。

【讨论】：