Javascript предотвращает распространение события через элемент

Question

Работа с картами google, в которых есть всплывающие окна infowindows. Эти инфо-окна имеют изображения, которые доступны клику. В результате я должен иметь возможность распространять события в infowindow. Однако я также могу нажать кнопку THROUGH на infowindow на другие маркеры, которые заставляют текущее закрытие закрывать и открывать новое окно.

Я не думаю, что эта проблема специфична для карт Google. Есть ли способ остановить события от распространения через элемент?

Думал, что код ниже поможет, но он этого не сделал.

$(document).on('touchstart', '.infoWindow', function(e){ 
    if ($(e.currentTarget) == $(this)) e.stopPropagation(); 
}); 

Answer 1

if ($(e.currentTarget) == $(this)) 

Это никогда правда. Он создает два разных экземпляра jQuery, которые, даже если они содержат один и тот же элемент, не являются одним и тем же объектом. Вы, возможно, хотели сделать

if (e.currentTarget == this) 

но это всегда верно - по определению алгоритма диспетчеризации событий, значение this из слушателя событий и currentTarget объекта события всегда относятся к тоже самое. Ад, even jQuery does this.

Таким образом, вы должны просто написать

$(document).on('touchstart', '.infoWindow', function(e){ 
    e.stopPropagation(); 
}); 

предотвратить touchstart события из барботирования через ваши infoWindows.

Answer 2

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

$('.infoWindow').on('touchstart', function(e){ 
    e.stopPropagation(); 
}); 

делегация события работает путем добавления слушателя событий к document, то каждый раз, когда document получает то, что touchstart события, JQuery проверяет исходный элемент и все его родителей, если они соответствуют заданному селектору. Если он совпадает, обработчик активируется. Вот почему вам не нужно добавлять слушателя каждый раз, когда вы добавляете новый элемент, который бы соответствовал данному селектору.

Answer 3

Установка цвета фона элемента .infoWindow может быть решением. Если она должна быть прозрачной, вы можете использовать следующим образом:

background-color: rgba(255, 0, 0, 0);