在mapboxgl弹出窗口中未触发事件
在mapboxgl弹出窗口中未触发事件
提问于 2019-11-27 18:38:12
我正在尝试用集群做一些自定义的事情，当你点击一个不能进一步扩展的集群时(例如。具有相同或非常相似位置数据的两个对象)，应该会出现该集群中包含的内容的列表，然后您可以与之交互。我能够检索对象，创建列表，并将其放在地图上的正确位置，但我无法将任何事件绑定到这些列表条目。我已经在地图应用程序的其他部分创建了类似的功能，这些功能似乎可以按预期工作。这些不是使用Popup库创建的，所以我可以尝试重用该技术，但放置Popup的简单性使我希望至少尝试让它们与事件一起工作。
我尝试将addEventListener与click、mouseup和mouseenter事件一起使用，但没有任何触发。
如何在地图框弹出窗口中使用eventListeners？传递给弹出窗口的HTML是否以某种方式进行了清理？
我目前使用的是mapboxgl 1.2.0。
弹出窗口是如何生成的：
new mapboxgl.Popup({offset:25}).setHTML(generateListPopup(myEntries).outerHTML)
.setLngLat(coords[0])
.addTo($scope.map);内容是如何生成的：
function generateListPopup(entries){
var container = document.createElement('div');
container.maxHeight = "240px";
container.overflowY = "auto";
var ul = document.createElement('ul');
ul.style.listStyle = "none";
ul.style.padding = "0";
container.style.background = "blue"; // does set the color to blue
container.addEventListener('mouseenter', function () { // does not trigger
console.log("by golly"); // does not show
});
angular.forEach(entries, function (e) {
var li = document.createElement('li');
var entry = document.createElement('p');
var f = document.createElement('button');
entry.innerHTML = e.name;
entry.style.cursor = "pointer";
f.addEventListener('mouseup', function () {
console.log("hello"); // nope
});
li.appendChild(f);
li.appendChild(entry);
ul.appendChild(li);
});
container.appendChild(ul);
return container;
}任何帮助都是非常感谢的！
回答 1
Stack Overflow用户
回答已采纳
发布于 2019-11-27 18:38:12
我只是在弄清楚之前就把整个问题打出来了，所以不妨把它贴出来，以防有人遇到同样的问题：
在返回容器上使用setDOMContent，而不是在返回容器的outerHTML上使用setHTML。我猜想当使用outerHTML序列化元素时，绑定的事件就会丢失。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/59068237
复制相关文章
相似问题
腾讯云开发者
