OpenLayers6 检测光标何时离开地图

Question

当光标离开地图时，我想隐藏一个附加到光标的圆圈。 当光标进入ol.control时，这个圆圈也必须隐藏。 在旧的 OL 版本中，我只是向canvas对象添加了一个mouseleave侦听器，但在 OL6 中，不能保证画布存在，并且对于ol-viewport下方的所有元素，这些基本事件的传播似乎都停止了。

如何在 OL6 中实现这种行为？

Answer 1

您将需要单独的控件侦听器。 我的上下文菜单代码（在控件上未激活）看起来像

var controlOver = false;

function setControlOver(element) {
    element.addEventListener('mouseover', function() { controlOver = true; });
    element.addEventListener('mouseout', function() { controlOver = false; });
}

setTimeout(function() {
    var controls = map.getViewport().getElementsByClassName('ol-control');
    for (var i=0; i<controls.length; i++) {
        setControlOver(controls[i]);
    }
    map.getControls().on('add', function(e) {
        // ????? setControlOver(e.element.getElement());
    });
}, 250);

map.getOverlays().on('add', function(e) {
    setControlOver(e.element.getElement());
});

var canvas = map.getViewport().getElementsByClassName('ol-overlaycontainer-stopevent')[0];

canvas.addEventListener('contextmenu', function (e) {
    if (!controlOver) {
        e.preventDefault();
        openContextMenu(e.x, e.y);
    }
});