jQuery 导航箭头的传播问题

Question

单击 my page 上的预告片大图（左上角）会打开一个带有大图的灯箱。然后，单击任意位置使用此代码将其关闭：

$(document).on('click', function() {
    $('#fab_gray').remove();
});

但是我想保留点击导航左右箭头的能力（通过防止灯箱关闭），使用以下代码：

$( '#lightbox_left, #lightbox_right' ).click(function( event ) {
    event.stopPropagation();
});

但它不起作用：单击这些元素仍会触发上面的代码并关闭灯箱。为什么？

Answer 1

尝试

$(document).on('click', function(e) {
    if($(e.target).is("#lightbox_right") || $(e.target).is("#lightbox_left")){ return }
    $('#fab_gray').remove();
});

这里我们基本上是在检查单击的元素是否是这些箭头按钮中的任何一个。如果是，那么我们只是 return。否则它会继续并删除

jQuery 导航箭头的传播问题

jQuery propagation issue with navigation arrows

jquery

stoppropagation