Использование addEventListener для обработки jQuery Нажмите "События" на селекторах внутри Google Maps infoWindow с jQuery UI Maps

Question

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

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

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

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

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

Answer 1

Решение:

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

Для удобства jQuery(элемент) назначен эквивалентным обычному jQuery(this)

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

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

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

Вот пример кода:

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

    }


});