Google Maps Api V3: двойное срабатывание события клика - PullRequest
Новая
       27

Google Maps Api V3: двойное срабатывание события клика

3 голосов
/ 27 июня 2011

Я следую примеру привязки MVCObject с этой страницы:

http://code.google.com/apis/maps/articles/mvcfun.html

Я хочу изменить цвет круга и переключить видимость маркеров, когда пользователь нажимает на круг, поэтому я добавляю слушателя в конструктор RadiusWidget следующим образом: 

function RadiusWidget() {
    var circle = new google.maps.Circle({
      strokeWeight: 2
    });

    this.set('distance', 50);
    this.bindTo('bounds', circle); 
    circle.bindTo('center', this);
    circle.bindTo('map', this);
    circle.bindTo('radius', this);
    this.addSizer_();

    google.maps.event.addListener(circle, 'click', function()
    {
       alert('circle clicked'); 
    });
  }

Моя проблема в том, что событие click запускается ДВАЖДЫ. Кто-нибудь знает почему?

Ответы [ 5 ]

4 голосов
/ 27 июня 2011

У меня была похожая проблема. Может ли это быть ошибкой в ​​картографическом API v3? У меня нет ответа, но есть обходной путь: 

google.maps.event.addListener(circle, 'click', function(event) {       
    if (event.alreadyCalled_) {
        alert('circle clicked again'); 
    }
    else {
        alert('circle clicked first time');      
        event.alreadyCalled_ = true;
    }
});

Клик по-прежнему срабатывает дважды, но вы можете его обнаружить.

1 голос
/ 31 августа 2012

Похоже, API карт запускает дополнительное событие "click" сразу после того, как исходное событие click было запущено. Самый правильный способ предотвратить это я обнаружил путем отладки; 

google.maps.event.addListener(marker, 'click', function(event) {
    console.log(event);  //see console for original mouse event     
    var ev = event.b;  //event.b object is original mouse event and might change

    //prevent defualts
    ev.preventDefault();
    ev.stopPropagation();
});

Это предотвратит второй запуск должным образом.

0 голосов
/ 07 июля 2015

Чтобы узнать, что вызывает функция, используйте console.log (событие) и проверьте консоль инструментов разработчика: 

google.maps.event.addListener(circle, 'click', function()
{
    alert('circle clicked');
    console.log(event);
});

У вас должно быть 2 события в списке (если они срабатывают дважды).Затем проверьте атрибут «srcElement» событий, чтобы увидеть, какой элемент вызвал функцию.

По аналогичной проблеме, с которой я столкнулся, я обнаружил, что прослушиватель событий карт Google недостаточно конкретен в отношении того, какой элемент будет вызыватьфункция.Поэтому я заменил прослушиватель событий карт Google на прослушиватель событий JQuery, чтобы сделать его более конкретным и указывать целевой элемент по его атрибуту ID.

Прослушиватель событий карт Google (запускается дважды) 

google.maps.event.addDomListener(control, 'click', function() { toggleLabels(); });

Слушатель событий JQuery (запускается один раз) 

$('body').on('click', '#labels-switch', function(){ toggleLabels(); });
0 голосов
/ 24 ноября 2014

Это работает для меня: 

google.maps.event.addListener(circle, 'click', function (e) {
    clearTimeout(this.doNotTriggerTwiceTimeout);
    this.doNotTriggerTwiceTimeout = setTimeout(function(){
        alert('circle clicked');
    }, 100);
});
0 голосов
/ 31 августа 2012

У вас есть еще один прослушиватель кликов на карте? Попробуйте использовать mouseEvent.stop(), чтобы он не распространялся на карту. документация здесь 

   google.maps.event.addListener(circle, 'click', function(mev) {
           mev.stop();
           alert('circle clicked'); 
   });

Это может быть строка 

 circle.bindTo('map', this);

что вызывает его.

...