点击屏幕关闭灯箱

Question

我正在从w3school（http://www.w3schools.com/howto/howto_js_lightbox.asp）做一个灯箱教程 我试图做的是在用户点击屏幕时关闭灯箱，但只有当它点击img的外部时才会关闭。

使用我正在使用的这段代码，用户点击的位置并不重要，它总是关闭灯箱......有没有办法解决这个问题。

$( 'body').on('click', function(event) {
     closeModal();
});

Answer 1

试试这个：

$('body').on('click', function(event) {
    closeModal();
});

$('#yourLightboxId').on('click', function(event) {
     event.stopPropagation();
});

这样可以防止点击事件到达灯箱的父母，其中包含body。

Answer 2

保持点击监听器在body上注册，如下所示：

$('body').on('click', function() {
    closeModal();
});

并且，作为一个简单的解决方案，将点击侦听器附加到灯箱本身，以捕获并吞下任何点击事件。

$('.lightbox').on('click', function(e) {
    e.stopPropagation();
});

stopPropagation会阻止事件冒泡到其他侦听器，例如document.body。这将确保body的听众不会被解雇。

使用灯箱容器的唯一选择器替换.lightbox。

Answer 3

$('.yourclassoflightbox').on('click', function(e) {
     e.stopPropagation();
});