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

我有一张地图，我在上面用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块。与link变量关联的每个名称都附加了一个onclick事件，该事件将使地图位于相应标记的中心。除了marker.openPopup调用之外，所有这些都可以在onclick事件上使用

你知道我在这里遗漏了什么吗

我还在这里演示了代码：

更新： 更让我困惑的是，在mouseover中，相同的方法可以毫无问题地工作，也就是说，在上面的函数中，以下代码确实打开了弹出窗口：

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

---

将链接处理程序更改为

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

---

点击链接以打开弹出窗口时，会弹出到地图，并在打开后立即关闭弹出窗口。

将链接处理程序更改为

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

点击链接打开弹出窗口，弹出窗口会在地图上冒泡，并在打开后立即关闭弹出窗口