Я использую этот плагин в WordPress, который создает красивые карты изображений с фигурами поверх изображений. Он широко использует JS / jQuery. Я использовал собственный скрипт, чтобы показать / скрыть div, когда я щелкаю форму. Этот конкретный div расположен над div, который содержит карту изображения. Он появляется и исчезает очень хорошо, но когда я нащупываю его и / или щелкаю по нему, по какой-то странной причине зависания и щелчки проходят через более сложный div вниз к div карты, все еще работая над popover. Вот упрощенная версия того, как все настроено:
function toggle_visibility(id) {
var e = document.getElementById(id);
if (e.style.opacity == '1')
setTimeout(() => {
e.style.opacity = '0';
}, this.animationDelay + 2),
setTimeout(() => {
e.style.zIndex = '-30';
}, 400);
else
e.style.zIndex = '999999999',
setTimeout(() => {
e.style.opacity = '1';
}, this.animationDelay + 2);
}
.city {
position: relative;
}
#ipano {
position: fixed;
min-width: 90vw;
left: 5vw;
top: 50%;
transform: translateY(-50%);
opacity: 0;
z-index: -30;
}
<div class="city">
// map code
</div>
<div id="ipano">
//popup code
</div>
Плагин карты позволяет мне назначить код onClick
для любой определенной фигуры, поэтому я добавил это, чтобы щелкнуть мышью по фигуре, чтобы открыть скрытый div примерно так: toggle_visibility('ipano'); javascript:event.preventDeafult();
.
Но даже если я удаляю свой собственный скрипт для раскрытия #ipano
div, проблема все еще сохраняется. Вы можете увидеть это в действии здесь .
Я думаю, что это как-то связано со скриптом карты и с тем, как он обрабатывает отображение областей оверлейной карты (с .svg), но я я не могу указать на это.
Я попытался изменить порядок в div, удалив бит protectDefault и добавив события-указатели: none; некоторым элементам карты, но это не помогло. Как это вообще возможно?
Любые предложения в правильном направлении, очень ценю, спасибо!