无法在固定位置关闭自定义弹出窗口

Question

这是一个 javascript 初学者问题。 我在固定位置（传单）创建了一个自定义弹出窗口。单击打开弹出窗口的标记后，我无法通过单击关闭按钮来关闭它。虽然我可以单击不同的标记，但弹出包装仍然打开，显示附加到每个不同标记的内容。因此，通过单击标记会更改弹出窗口的内容，但无法通过单击关闭按钮关闭弹出窗口。
我尝试了一个事件监听器。 我需要完成这项工作的那段代码。 任何帮助将不胜感激。

// Adds custom marker

var redFlag = L.icon({
    iconUrl: 'images/mapmarker2.png',
    iconSize: [34, 34],
    iconAnchor: [17,34]
});

// Adds markers and popup
// geoJSON file stored in 'art' variable

const myLayer = L.geoJSON(art, {
    pointToLayer: function (feature, latlng) {
          return L.marker(latlng, {icon: redFlag});

},
onEachFeature: function ( feature, layer) {
    layer.on('click', function(e){

// popup content

   var getWrap = document.getElementById('wrapper');
        var wrap = getWrap.appendChild(document.createElement('div'));
        wrap.className = 'wrapper';
        wrap.innerHTML =  
           `<div class="close">X</div>`+ 
           `<div class="popUpContent" style="background-color:#e8f4ff">`+
           `<div class='pic'><img src = 
            "images/${feature.properties.image}"></div>`+ 
           `<div class="puName"><span 
            class="puName">${feature.properties.name}</span><br>`+
           `<span class="puTitle">"${feature.properties.title}"</span><br>`+ 
           `<div class="extra3">${feature.properties.extra}</div></div>`+ 
           `</div>`;

    if(!feature.properties.title){

        wrap.innerHTML =  
            `<div class="close">X</div>`+
            `<div class="popUpContent" style="background-color:#e8f4ff">` + 
             `<div class='pic'><img src = 
             "images/${feature.properties.image}"></div>`+ 
             `<div class="puName"><span 
             class="puName">${feature.properties.name}</span><br>`+ 
             `<div class="extra3">${feature.properties.extra}</div></div>`+ 
             `</div>`;
         }

// Add eventlistener to the close button

document.querySelector('.close').addEventListener( 'click', closePopup);
      function closePopup(e){

        if(event.target.matches('.close')){
            document.querySelector(".wrapper").style.display='none'
        }else if(document.querySelector(".wrapper").style.display='block'){
            document.querySelector(".wrapper").style.display='none';
           }
         }

       });
    }

});

mymap.addLayer(myLayer)

Answer 1

您在创建弹出窗口之前为close 添加事件侦听器。 您应该在onEachFeature 函数中的layer.on('click', function(e){... 末尾添加此侦听器。

为确保监听器只添加了事件，请在添加事件之前使用removeEventListener。

Answer 2

事件监听器不起作用，因为弹出窗口是动态创建的。见Attach event to dynamic elements in javascript

另外，我一直在做的就是在 HTML 中包含弹出窗口。但是将 CSS 显示属性设置为 display: none。当您需要显示弹出集时 以block 为例。

这样你也可以在页面加载时添加事件监听器，因为弹出窗口不是动态创建的。只是隐藏，直到你需要它。

Answer 3

我找到了答案。它是您构建动态生成的 DOM 元素的方式， 在这种情况下是弹出窗口。在 div 中创建一个 id="popup" 的空 div id="mapid" 在您的 HTML 文件中。其余部分是动态生成的。的 if 语句 事件监听器仅在条件为真时才需要该代码块。

const element = document.getElementById('popup');

      element.innerHTML =
            `<div class= "wrapper" style="background-color:#fff">`+
            `<div class="close">X</div>`+ 
            `<div class="popUpContent" style="background-color:#e8f4ff">` +
            `<div class='pic'><img src = "images/${feature.properties.image}"></div> 
             <p>`+ 
            `<div class="puName"><span class="puName">${feature.properties.name} 
              </span><br>`+
            `<span class="puTitle">"${feature.properties.title}"</span><br><p>` + 
            `<div class="extra3">${feature.properties.extra}</div></div>`+ 
            `</div></div>`;

  // the eventListener

            document.getElementById('popup').addEventListener( 'click', closePopup);
                    function closePopup(e){
                if(document.querySelector('.wrapper').style.display = 'block'){
                   document.querySelector('.wrapper').style.display='none';
                }
             }