Question

正如标题所说，我使用了这个（Example）更具体地说，我使用了右上角的信息框（美国人口密度）。我修改它以显示更多信息onclick等。现在我有一个问题，这个div是不可选择的。我需要能够选择文本（用于复制文本），而不是选择文本，它只是移动地图。是否有一个“非常简单的解决方案”，因为我找不到合适的地方。也许在某种程度上在CSS？

.info {
        position: fixed;
        right: 0;
        bottom: 23px;   
        padding: 6px 8px;
        font: 14px/16px Arial, Helvetica, sans-serif;
        background: white;
        background: rgba(255,255,255,0.8);
        box-shadow: 0 0 15px rgba(0,0,0,0.2);
        border-radius: 5px;
        /*-webkit-user-select: text;
           -moz-user-select: text;
                user-select: text;
        -webkit-user-drag: text;*/   /*Tried this, didn't work. */

    }
    .info h4 {
        margin: 0 0 100px;
        color: #777;
    }

编辑：我应该添加，当我开始选择其他div时，我可以选择它。如图所示，如果我开始选择显示我的图层的div，我可以选择文本，但如果我尝试直接从该div中选择（在图片的右上角），它会移动地图。我知道画面很小，希望它能提供所需的信息/视觉。图片：http://www.upload.ee/image/3839164/asd.PNG

谢谢，克里斯蒂安

Answer 1

在控件onAdd方法中使用disableClickPropagation。

onAdd: function (map) {
    var container = L.DomUtil.create('div', 'my-custom-control');
    container.innerHTML += 'This is an example using disableClickPropagation.';
    L.DomEvent.disableClickPropagation(container);
    return container;
}

http://jsfiddle.net/9q756/1/

Answer 2

您可以通过在底部en top控件容器上重新启用指针事件来解决此问题。这些在leaflet.css中设置为none：

https://github.com/Leaflet/Leaflet/blob/master/dist/leaflet.css#L93

您需要在自己的自定义CSS中否决这一点：

.leaflet-top,
.leaflet-bottom {
    pointer-events: all;
}

div中不可选择的文本可选择传单

2 个答案: