单击图像灯箱上的关闭按钮双击并强制打开背景链接答案

【问题标题】：Clicking close button on image lightbox doubleclick and force background link to open单击图像灯箱上的关闭按钮双击并强制打开背景链接
【发布时间】：2020-04-30 02:28:12
【问题描述】：

我在 woocommerce 网站上遇到了这个问题，当用户在移动设备上单击背景中图像灯箱链接上的关闭按钮时，也会单击。在我的示例中，关闭按钮重叠篮子图标。因此，当您关闭图像时，篮子就会打开。 close button is over basket icon我用的是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);

【问题讨论】：

标签： jquery wordpress woocommerce

【解决方案1】：

尝试使用 $('className').on('click') 而不是 .click() 事件，因为前者可以使用更少的内存并适用于动态添加的元素。

【讨论】：

感谢您的建议。我认为 jquery 操作不适用于 .pswp 元素。您还有其他解决方案如何检查图像是否关闭？

【解决方案2】：

你可以这样做：

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

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

});
})
})(jQuery);

【讨论】：

谢谢，但没用。我认为 jquery 操作不适用于 .pswp__button--close

【解决方案3】：

你只需要让事件冒泡：

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

});

【讨论】：

【解决方案4】：

我的问题解决了。如果我理解正确，原因是事件冒泡和捕获。 Woocommerce 灯箱是一个具有高度 z-index 的 div 层。但是这一层上的触摸事件也适用于下层。需要停止事件处理。我使用了这个 ontouchstart = “return false;”，它被添加到了 woocommerce/single-product/photoswipe.php。

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

【讨论】：