jQuery通過點擊任意位置關閉DIV頁面

我想打開email-signup當我點擊email-signup-link時。然後，我想通過點擊頁面上的任何地方關閉它，當然，除了框本身之外。jQuery通過點擊任意位置關閉DIV頁面

我在這個網站上看了一圈，並且有針對這個問題的各種解決方案，但是我試過的每一個都顯示，然後立即隱藏我的div。我一定做錯了什麼。

這是HTML：

<a href="#" id="email-signup-link">Sign Up</a> 
<div id="email-signup"> 
    <div id="inner"> 
     <h2>E-mail Notifications</h2> 
     <input class="" type="text" name="description" placeholder="Enter your e-mail address" id="description" /> 
     <a href="#">Sign Up</a> 
    </div> 
</div>

這是我的javascript：

$('#email-signup').click(function(){ 
    e.stopPropagation(); 
}); 
$("#email-signup-link").click(function() { 
    e.preventDefault(); 
    $('#email-signup').show(); 
}); 
$(document).click(function() { 
    $('#email-signup').hide(); 
});

來源

2012-02-24 Aaron Salazar

兩件事情。你實際上沒有定義e，所以你不能使用它。而你在其他點擊處理程序需要stopPropagation還有：

$('#email-signup').click(function(e){ 
    e.stopPropagation(); 
}); 
$("#email-signup-link").click(function(e) { 
    e.preventDefault(); 
    e.stopPropagation(); 
    $('#email-signup').show(); 
}); 
$(document).click(function() { 
    $('#email-signup').hide(); 
});

http://jsfiddle.net/Nczpb/

來源

2012-02-24 21:57:07

只是向上'''e.stopPropagation（）;'''有時會導致不需要的事件。所以說，如果你點擊'''＃email-signup'''來點擊提交'''e.stopPropagation（）;'''將阻止你的表單提交。 – 2014-10-01 16:12:09

@codenamejames如果你點擊'＃email-signup'，那麼根本沒有'stopPropagation'，所以你會沒事的。 'stopPropagation'只會阻止事件冒泡DOM。除非您的提交按鈕是'＃email-signup'的父母，否則您的示例永遠不會成爲問題。 – 2014-10-01 16:54:26

蒙太奇你是對的。感謝您的反饋:-) – 2014-10-01 17:19:53

$(":not(#email-signup)").click(function() { 
    $("#email-signup").hide(); 
});

雖然你會更好，有某種彈出後面覆蓋的和有約束力的僅在上面單擊事件。

來源

2012-02-24 21:55:03

如果你打算這樣做，請製作$（'：not（＃email-signup）'）。 – 2012-02-24 21:56:17

爲什麼？ .not（）方法將最終爲您提供更多可讀選擇，而不是將複雜的選擇器或變量推送到：not（）選擇器過濾器中。在大多數情況下，這是一個更好的選擇。 – 2012-02-24 21:58:03

另外，如果頁面上有很多標籤，則可能會添加-1個可能添加數千個事件偵聽器的事件偵聽器。 – 2012-02-24 21:58:29

var mouse_is_inside = false; 

$(document).ready(function() 
{ 
    $('.form_content').hover(function(){ 
     mouse_is_inside=true; 
    }, function(){ 
     mouse_is_inside=false; 
    }); 

    $("body").mouseup(function(){ 
     if(! mouse_is_inside) $('.form_wrapper').hide(); 
    }); 
});

在另一計算器後引用...

來源

2012-02-24 21:56:03 Grigor

$(document).click (function (e) { 
    if (e.target != $('#email-signup')[0]) { 
     $('#email-signup').hide(); 
    } 
});

來源

2012-02-24 21:57:53

+1非常好，簡單的解決方案 – 2012-02-24 22:10:36

有人可以解釋'[0]'在這個解決方案中扮演的角色嗎？ @Alexander？謝謝 – Robbo 2014-09-08 16:47:03

jQuery選擇器（'$（）'）總是返回一個數組。 [0]只需選擇此數組的第一個元素。如果ID的使用正確，這應該是唯一的結果。 – 2014-09-08 20:33:52

我經常看到這種情況是用一個div覆蓋的形式背後的頁面的方式（變灰通常情況下）。有了這個，你可以使用：

$("#greydiv")..click(function() { 
    $("#email-signup").hide(); 
    $("#greydiv").hide(); 
});

...或類似的東西。

來源

2012-02-24 21:58:40

jQuery通過點擊任意位置關閉DIV頁面

回答

相關問題