單擊屏幕關閉燈箱

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();
});