使內容的div點擊嵌套的div

我有以下佈局：使內容的div點擊嵌套的div

<div id="content"> 
    <div id="img"><img src=""></div> 
    <div id="main">Some content</div> 
    <div id="btn" class="hidden"><button>Submit</div> 
    <div class="hidden">Some other stuff</div> 
</div>

我綁到其擴展，使隱藏層（按鈕和更多的內容）中可見內容的div jQuery的單擊事件。我還有一個綁定到按鈕的事件，可以在點擊時激活模式。

使用隱藏/顯示方法，div的展開/摺疊工作沒有問題。問題是點擊按鈕後，即使模式被激活，div也會崩潰。

所以在點擊提交按鈕後，模式會彈出，但在後臺主div會摺疊。如果提交按鈕被按下，我試圖保持主div打開。

我試着將按鈕和包含div的z-index字段設置爲比內容div更高的值;這沒有幫助。

我怎樣才能保持在摺疊的div（其中按鈕和額外的內容不可見）的任何地方點擊功能展開該div並單擊展開的div中的按鈕激活模式對話框而不折疊主div？

謝謝

來源

2011-02-16 Misha M

你必須防止事件冒起來。當你點擊按鈕時，click事件bubbles up the DOM tree並觸發其他事件處理程序。

看一看event.stopPropagation()：

$('button').click(function(event) { 
    event.stopPropagation() 
    // modal stuff 
});

您也可以忽略不以#content DIV來源的所有點擊：

$('#content').click(function(event) { 
    if(event.target == this) { 
     // hide/colapse 
    } 
});

，如果你想這可能會更好點擊div中的「任意位置」而不隱藏它。

來源

2011-02-16 22:02:09

工作很好。並感謝您展示第二個選項。雖然它不適用於這個問題，但它解決了我正在處理的另一個問題。 – 2011-02-16 22:51:59

聽起來好像按鈕中的點擊事件正在用於打開模式（就像你想的那樣），但隨後繼續向上傳播DOM樹，直到它觸發「content」div的onclick事件處理程序，關閉它。

您應該能夠通過從您的按鈕的onclick函數返回false或通過在同一函數中的任意位置調用event.stopPropagation()來停止此操作。

希望這會有所幫助！

來源

2011-02-16 22:02:31

$("#btn").click(function(event){ 
    event.stopPropagation(); 
    // do something 
});

停止事件冒泡。

來源

2011-02-16 22:03:57 cp3

嘗試將e.stopPropagation（）放在按鈕單擊事件上。像這樣：

$("#btn").click(function(e) { 
    e.stopPropagation(); 
    // some other code 
});

來源

2011-02-16 22:05:09 Luke

使內容的div點擊嵌套的div

回答

相關問題