无法以编程方式打开弹出窗口

Question

我有一张地图，我在上面使用 geoJSON 加载标记。

当地图加载时，我运行一个函数buildVisibleSys，该函数负责在地图上构建当前可见系统的列表。

该函数如下所示：

buildVisibleSys = function() {
  var bounds, visibleSys;
  visibleSys = [];
  bounds = map.getBounds();
  return systemLocations.eachLayer(function(marker) {
    var link;
    link = onScreenEl.appendChild(document.createElement('a'));
    link.href = '#';
    link.id = "marker" + marker._leaflet_id;
    link.innerHTML = marker.options.title;
    link.onclick = function() {
      marker.openPopup();
      map.panTo(marker.getLatLng());
    };
  });
};
map.on('load', buildVisibleSys);

在此函数中，对于每一层，我都会获取一些数据并使用每个标记的名称构建一个 html 块。与 var 关联的每个名称都link附加了一个 onclick 事件，该事件将使地图以相应的标记为中心。除了marker.openPopup()我在该onclick活动中也接到的电话之外，这一切都有效。

知道我在这里缺少什么吗？

我还在这里提供了代码的演示： http ://jsfiddle.net/lmartins/z8wBW/

更新：更令我困惑的是，使用鼠标悬停时，相同的方法可以正常工作，也就是说，在上面的函数中，以下代码确实打开弹出窗口：

   link.onmouseover = function(ev) {
      marker.openPopup();
      marker._icon.classList.add('is-active');
    };

Answer 1

将您的链接处理程序更改为

link.onclick = function(e) {
  marker.openPopup();
  map.panTo(marker.getLatLng());
  e.stopPropagation();
  e.preventDefault();
};

单击打开弹出窗口的链接会向下冒泡到地图，并在打开后立即关闭弹出窗口。