Нажав кнопку закрытия на лайтбоксе изображения, дважды щелкните и заставьте фоновую ссылку открыться

Question

У меня есть проблема на сайте woocommerce, когда пользователь на мобильном телефоне нажимает кнопку закрытия на ссылке лайтбокса изображения в фоновом режиме. В моем примере кнопка закрытия перекрывает значок корзины. Поэтому, когда вы закрываете изображение, корзина открывается. кнопка закрытия находится над значком корзины Я использую лайтбокс wocommerce 3.0

ссылка на страницу с проблемой: https://nakit-ure.si/rocne-ure/rocna-ura-just-watch-jw20004-008/ (откройте в мобильном представлении, нажмите на изображение и попробуйте закрывая его)

Я пытался использовать jquery: 1. сначала добавить класс в корзину при открытии изображения

CSS
{
.pointer-disable{pointer-events:none}
}

ЭТО JQUERY РАБОТА

(function($) {
$(document).ready(function(){
$('.wp-post-image').click(function(){

$('.nav-right').addClass('pointer-disable');

});
})
})(jQuery);

СЕЙЧАС мне нужно отключить класс, когда изображение закрыто.

удалить класс, когда изображение закрыто. ЭТО JQUERY НЕ РАБОТАЕТ

(function($) {
$(document).ready(function(){
$('.pswp__button--close').click(function(){

$('.nav-right').removeClass('pointer-disable');

});
})
})(jQuery);

Answer 1

Проблема решена в моем случае. Если я правильно понимаю, причина была в пузырях и захвате событий. Woocommerce lightbox - это слой div с высшим z-индексом. Но событие касания на этом слое работает и для нижнего слоя. Нужно было прекратить обработку событий. Я использовал для этого ontouchstart = «return false;», который был добавлен в woocommerce / single-product / photoswipe. php.

 <button class="pswp__button pswp__button--close" ontouchstart="return false;"></button>

Answer 2

Вы можете сделать так:

(function($) {
$(document).ready(function(){
$('.pswp__button--close').click(function(){

$('.pointer-disable').hide();

});
})
})(jQuery);

Answer 3

Вам просто нужно остановить событие:

$( ".wp-post-image" )on('click', function( event ) {
  event.stopPropagation();

});

Answer 4

Попробуйте использовать $ ('className'). On ('click') вместо событий .click (), поскольку первые могут использовать меньше памяти и работать с динамически добавляемыми элементами.