有没有人知道如何在单击并拖动嵌入地图本身的div框上方时抑制平移？

例如，在此处单击并拖动到图例上方时，地图就会随之拖动。我想抑制该功能。
我知道是否可以使用此技术，但是我想知道这是否是唯一的方法：

map.dragging.disable();


评论

我已经使用jQuery .hover侦听器（使用handlerIn和handlerOut禁用和启用拖动）实现了类似的功能。不知道这是否适合您：api.jquery.com/hover

#1 楼

使用Leaflet网站上的示例，请注意L.Control对象实例化为info；这是与地图的悬停交互关联的右上角的<div>框。这是从Leaflet示例中在index.html中定义的地方：

    // control that shows state info on hover
    var info = L.control();

    info.onAdd = function (map) {
        this._div = L.DomUtil.create('div', 'info');
        this.update();
        return this._div;
    };

    info.update = function (props) {
        this._div.innerHTML = '<h4>US Population Density</h4>' +  (props ?
            '<b>' + props.name + '</b><br />' + props.density + ' people / mi<sup>2</sup>'
            : 'Hover over a state');
    };

    info.addTo(map);


要在用户光标位于此<div>框内时禁用拖动，请在包含HTMLElement对象的<div>（一个L.Control元素）：

    // Disable dragging when user's cursor enters the element
    info.getContainer().addEventListener('mouseover', function () {
        map.dragging.disable();
    });

    // Re-enable dragging when user's cursor leaves the element
    info.getContainer().addEventListener('mouseout', function () {
        map.dragging.enable();
    });


回想一下map被定义为早期的L.Map实例。

评论

谢谢@Arthur，我对这种方法很熟悉。我希望有人可以像使用css那样提供解决方案，如指针事件：自动或指针事件：没有或类似的东西，对我来说不太起作用。如果没有其他人发布更好的解决方案，我将给您检查，因为这意味着这是最好的解决方案。

– Concolato先生
2014年7月9日在13:11


我也希望看到这一点。如果CSS可以解决此问题，那将很好，但是应该管理哪个元素的指针事件？传单控制元素包含在传单容器元素中，后者正在接收触发缩放和平移的指针事件。

–亚瑟
2014年7月9日下午13:19
我一直试图把它放在感兴趣的领域毫无济于事。

– Concolato先生
2014年7月9日下午13:21
是的，这是有道理的：感兴趣的
是传单控制的子元素，它本身位于传单容器的内部。父级（传单容器）在孩子（传单控件）之前接收事件。

–亚瑟
2014年7月9日15:09

#2 楼

一种替代解决方案是使用JavaScript停止事件传播（就像对Leaflet控件所做的那样，例如缩放按钮）：

var div = L.DomUtil.get('div_id');
if (!L.Browser.touch) {
    L.DomEvent.disableClickPropagation(div);
    L.DomEvent.on(div, 'mousewheel', L.DomEvent.stopPropagation);
} else {
    L.DomEvent.on(div, 'click', L.DomEvent.stopPropagation);
}


#3 楼

@Arthur解决方案的一个小优化。
使用mousedown和mouseup。因此，当您将鼠标悬停在div上时，它不会触发。仅当您开始在div内拖动时。

请注意，将mouseup用于整个html 

$('.yourDiv').mousedown( function() {
    map.dragging.disable();
});

$('html').mouseup( function() {
    map.dragging.enable();
});


#4 楼

我认为最简单的方法是
 $('div').on("mousedown", L.DomEvent.stopPropagation);

它将停止在div元素内拖动地图。

本文标签： leaflet