Использование addEventListener для обработки jQuery Click Events On Selectors Внутри Карты Google infoWindow С помощью пользовательских интерфейсов jQuery

Question

Проблема: при попытке запуска событий jQuery в селекторах в инфо-окнах Google Maps прослушиватель событий щелчка, необходимый для захвата событий в объекте gmap, должен быть родительским для других функций щелчка, что приводит к сбою событий щелчка при первом нажатии.

Все решения, которые я нашел здесь в StackOverflow, показали, как добавить eventListener, но все еще не учитывали отказ при первом выпуске щелчка.

Решение ниже будет работать, если вы используете jQuery UI Maps, чтобы заполнить интерактивные маркеры, открывающие infoWindows, и хотите иметь возможность настраивать элементы внутри infoWindow для событий jQuery на главной (родительской) странице.

Это решение разрешает типичную проблему с первым вызовом, возникающую из-за функций вложенных кликов, когда события jQuery не срабатывают при первом щелчке, так как ваши функции должны быть внутри addEventListener для $ ('map_canvas'). Gmap() в порядке быть пойманным - но тогда, конечно, они будут вложены в другую функцию щелчка и, следовательно, не будут срабатывать, пока второй раз не щелкнут.

Есть, конечно, более стандартные и/или красноречивые способы достижения этого, но помимо необходимости требовать немного нестандартного синтаксиса, это решает все проблемы и делает очень быстрое, прямое, работоспособное решение в противном случае очень неприятной проблемой, экономя вас на 8-часовом столкновении на стене, мне потребовалось произвести.

Answer 1

Решение:.

Использование слушателя событий щелчка на $ («# map_canvas») GMap() в качестве прилова-все, с mainevent функцией, которая позволяет нам определить имя (ы) класса объект, который был нажат, а затем использовать операторы if, чтобы убедиться, что он соответствует любому из «селекторов», который мы хотим использовать в инфо-окне, и выполнять регулярные функции оттуда.

Для удобства JQuery (элемент) присваивается быть эквивалентна нормальной JQuery (это)

Классов расщепляются в массив для учета нескольких классов на щелкнули объект.

Затем мы просто используем оператор if, чтобы проверить, является ли класс, который мы хотим использовать в качестве селектора, в массиве имен классов для объекта, который был нажат, и, если это так, введите наш обычный jQuery, который мы бы имели в противном случае помещается внутри функции вложенного щелчка для селектора, просто подставляя (элемент) для (этого), когда это необходимо.

Это может быть очень легко адаптирован для использования в качестве идентификатора селектора вместо классов - просто изменить $ (элемент) .attr («класс») до $ (элемент) .attr («ид»)

Здесь приведен пример кода:

jQuery('#map_canvas').gmap().addEventListener('click', function(mainevent) { 

    // We cannot directly target elements inside the Google map and infoWindows with jQuery, so here we catch all clicks on the map and then use if statements to see if the clicked element matches any of the selectors we wish to use. 

    var element = jQuery(mainevent.target); 
    if ($(element).attr('class')) { var MainEventClassList = $(element).attr('class').split(' '); } 

    // Gets the classes of the clicked element into an array, so we can check for matches with if statements, as an equivalent to typical jQuery class selectors. We have also made (element) available as a replacement for (this). 



    if (jQuery.inArray('SelectorClassName', MainEventClassList) >= 0) { 

     mainevent.preventDefault(); 
     mainevent.stopPropagation(); 
     var destinationid = jQuery(element).attr('href'); 
     alert(destinationid); 

    } 


});