檢測用戶在div外部的點擊次數

我向用戶顯示模式/燈箱。當用戶點擊一個按鈕時，模式顯示，頁面的其餘部分變暗。通常的東西。檢測用戶在div外部的點擊次數

但是我想這樣做。如果用戶點擊模態外的任何元素，我希望模態消失，頁面恢復正常。

這怎麼辦？我知道我可以爲身體設置一個onclick事件，然後檢查事件目標是否是我的模態，但是如果用戶點擊模態中的鏈接/文本框/按鈕怎麼辦？在這種情況下，目標不會是模態。我該如何解決這個問題？

有沒有辦法檢查事件目標是否包含在<div id="modal"></div>中，所以如果是這樣，我不會關閉模態，如果沒有，這意味着用戶在模態外單擊，我可以關閉它嗎？

來源

2013-01-12 Click Upvote

你可以把一個div放在填充整個空間的模式下，並將你的點擊處理程序附加到它。

來源

2013-01-12 07:01:59 Arnaud

有趣---- –

我會去與@roXon的解決方案。這是一個更好的實現，如果你需要改變你的html –

這只是一個工作（或一個很好的功能，但取決於）。這意味着需要額外的代碼來創建一個全尺寸的元素，另外它還會阻止與其他（模態外）文檔元素之間的任何交互，從而使點擊無效。因此，如果您不打算放置**不透明**（可見）全層 - 在用戶體驗方面，這是要避免的。 –

jsBin demo

$(document).mouseup(function(e){ 
    if(e.target.id !== 'modal'){ 
    $('#modal').hide(); 
    } 
}); 

$('#modal').mouseup(function(e){ 
    e.stopPropagation(); // prevent mouseup propagate to underneath layers 
});

來源

2013-01-12 07:02:05

這看起來比我的回答更好:) – Arnaud

@Arnaud編輯我的答案與哈演示:)現在它甚至更好:) thx！ –

不要工作，如果我點擊模態的孩子 – imos

$("body").click(function(e){ 
    if(! $(e.target).closest("#modal").length){ 
     $('#modal').hide(); 
    } 
});

demo

來源

2013-01-12 07:10:40 imos

因此，每次點擊頁面時（關閉了Modal），這段代碼都會無端運行dom樹搜索一個'.closest（）'元素...恕我直言：不好。 –

@roXon是的，但它的工作原理應該如此。在[jQuery UI對話框]中使用的相同方法（https://github.com/jquery/jquery-ui/blob/master/ui/jquery.ui.dialog.js#L682） – imos

感謝您的鏈接！難以置信 –

另一種方法：

var mouseOverModal = false; 

$(document).click(function(e){ 
    if (! mouseOverModal){ 
     // close modal 
    } 
}); 

$('#modal').bind("mouseenter mouseleave", function(e){ 
    mouseOverModal = ("mouseenter" == e.type); 
}) 

$('#open-modal-handler').click(function(){ 
    // open modal 
    return false; // <- IMPORTANT 
})

來源

2013-01-13 06:58:56 imos

檢測用戶在div外部的點擊次數

回答

相關問題