javascript - 将 pointerenter 和 pointerleave 事件监听器添加到 map /容器？

Question

我在一个组中有很多形状，需要为它们监听pointerenter 和pointerleave 事件。目前我正在将事件监听器添加到每个形状，但据我了解，最好让一个监听器覆盖所有形状。

按照此处的示例为 tap 添加事件监听器:https://developer.here.com/api-explorer/maps-js/v3.0/events/map-objects-event-delegation ，除了 pointerenter 和 pointerleave 之外，我也想这样做，但无论我如何尝试，我都无法触发它们。

我已经尝试将它添加到 container 中，如上例所示:

container.addEventListener('pointerenter', function(event){
   console.log(event.target);
});

还有 map :

map.addEventListener('pointerenter', function(event){
   console.log(event.target);
});

tap 事件触发得很好，但是对于 pointerenter 和 pointerleave，我目前被迫将两个监听器添加到每个单独的形状。

Answer 1

对于您当前的代码段，只有在鼠标进入顶级对象、 map 或容器时才会触发 pointerenter 事件。

但是，如果您使用 addEventListener 函数的第三个可选参数，并将其设置为 true 以指示处理程序应该在捕获阶段，与冒泡阶段相对:

map.addEventListener('pointerenter', function (event) {
  console.log(event.target instanceof H.geo.Polygon);
}, true);

addEventListener API reference