Question

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

// 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添加事件监听器。您应该在layer.on('click', function(e){...函数的onEachFeature的末尾添加此侦听器。

要确保侦听器仅添加一个侦听器，请在添加事件之前使用removeEventListener。

Answer 2

由于动态创建了弹出窗口，因此事件侦听器不起作用。参见Attach event to dynamic elements in javascript

或者，我一直做的只是将弹出窗口包含在HTML中。但是将CSS显示属性设置为display: none。当您需要显示弹出框时例如显示到block。

由于页面弹出窗口不是动态创建的，因此您还可以在页面加载时添加事件侦听器。只是隐藏，直到您需要它为止。

Answer 3

我找到了答案。这就是您构造动态生成的DOM元素的方式，在这种情况下是弹出窗口。在div中使用id =“ popup”创建一个空div HTML文件中的id =“ mapid”。其余的是动态生成的。的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';
                }
             }

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

3 个答案: