Question

我使用javascript（不是谷歌iframe）在容器div中嵌入了自定义ggl地图，并在第一个/原始容器div中显示了地图。我需要停用div中的所有链接，以便嵌入式地图中的链接不可点击。

我尝试过以下JQuery解决方案，但它似乎无法运行：

<script>
 $("#map_canvas a").click(function(e) {
   e.preventDefault();
 });
</script>

然后我尝试了以下CSS解决方案，但它阻止了用户平移地图的能力。

pointer-events: none;

如何在防止锚定链接在嵌入式地图中工作的同时启用用户与地图的交互？谢谢！

Answer 1

我猜你的第一个问题是这些链接是动态创建的。因此，当您调用$("#map_canvas a")时，没有要绑定的a个元素。您可以尝试bind()的委托语法。假设您的脚本被调用时存在#map_canvas（我建议您将代码放在ready块中）：

$( function() { 

    $('#map_canvas').on('click', 'a', function() {
        // return false will preventDefault and stopPropagation in jQuery
        return false;  
    });

});

Answer 2

如果标签中嵌套了元素，则应使用以下代码。否则，它们也会被删除。

$(document).ready(function() {
    $("#map_canvas a").removeAttr("href");
});

Answer 3

或者你可以做这样的事情。

$('#map_canvas a').click(function () {return false;});

Answer 4

这将删除<a>元素本身。我不知道这是不是你想要的：

$("#map_canvas a").remove();

但正如已经说过的那样，你必须等待DOM准备就绪，因为这些链接可能是自动生成的，不是初始静态布局的一部分，因此不会绑定到DOM。

所以，这可以解决问题（只有在DOM准备就绪时才会执行）：

$(document).ready(function() {
    $("#map_canvas a").remove();
});

如果您不想删除自己的<a>元素并停用它们，请尝试：

$(document).ready(function() {
    $("#map_canvas a").on('click', 'a', function() {
        return false;
    });
});

从div中删除所有链接

4 个答案: