Question

我有一个带标记的谷歌地图。单击时，每个标记显示一个信息窗口。在infowindow内部是一个向队列添加一些数据的按钮。在第一次单击“添加到队列”按钮时，它会触发一次，单击它会触发两次的第二个按钮，单击第三个按钮并触发三次，依此类推。

google.maps.event.addListener(marker, 'click', (function(marker, i) {
    return function() {
        $('.show-compare').popover('destroy');
        infowindow.setContent('<div class="add-wrapper"><div class="show-compare" data-toggle="popover" data-placement="top" data-content="Add to compare basket">CLICK ME</div></div>);
        infowindow.setOptions({maxWidth: 200});
        infowindow.open(map, marker);

        $('body').on("click", '.show-compare', function(e) {
                e.preventDefault();
                alert();//this fires x times, only should fire once per click!!

        }
    }) (marker, i));
}

HELP！谢谢:)）

Answer 1

如果正在单击的按钮位于标记内，则单击事件可能会传播到标记，然后标记会向该按钮添加另一个单击事件。因此1x，2x，3x，4x发射模式。

尝试添加停止传播功能。

$('body').on("click", '.show-compare', function(e) {
    e.preventDefault();
    e.stopPropagation();
    alert();
}

Answer 2

您的代码的作用是：每次标记上都有单击事件时，您的代码将在body标记上注册另一个单击事件处理程序。你应该将它移出

google.maps.event.addListener(marker, 'click', (function(marker, i)

这样，您只能在body标签上注册一个点击处理程序

Answer 3

$('body').off("click", '.show-compare').one("click", '.show-compare', function(e) {
    e.preventDefault();
    e.stopPropagation();
    alert();
}

这对我有用

Google Maps Popover点击事件会多次触发

3 个答案: