导航箭头的jQuery传播问题

Question

在我的页面上点击一个预告片的大图(左上)会打开一个带有大图的灯箱。然后，单击任意位置关闭它，代码如下:

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

然而，我想保留点击导航左箭头和右箭头的能力(通过防止灯箱关闭)，使用以下代码:

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

但是它不起作用:点击这些元素仍然会触发上面的代码并关闭灯箱。为什么?

Answer 1

Try

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

这里我们检查被点击的元素是否是箭头按钮。如果是，我们就返回。否则它会删除