javascript - Google map Popover 点击事件多次触发

Question

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

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));
}

救命!谢谢:)

Answer 1

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

尝试添加停止传播函数。

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