對外界關閉切換點擊

我還是很新的JavaScript和JQuery ...我如何獲得這個div通過點擊轉換區域以外，關閉（我不希望用戶必須使用一個關閉按鈕）對外界關閉切換點擊

的代碼如下所示：

function toggleDiv(divId) { 
$("#"+divId).toggle(); 
} 

function showonlyone(thechosenone) { 
$('.newnote').each(function(index) { 
     if ($(this).attr("id") == thechosenone) { 
      $(this).show(0); 
     } 
     else { 
      $(this).hide(0); 
     } 
}); 
}

和HTML看起來像這樣

<div class="note"> 

    <a id="myHeader1" href="javascript:showonlyone('newnote1');" > 
      <img src="images/SN_NotesPage_14.png"> 
    </a>  

    <div class="newnote" id="newnote1"> 
      <a> 
       <img src="images/SN_NotesPage_16.png"> 
      </a> 
    </div> 
</div>

謝謝

來源

2012-07-31 David

我通常會做的是將一個點擊事件監聽器添加到關閉覆蓋層的文檔主體中。爲了防止通過點擊關閉覆蓋，我添加了第二個點擊事件監聽器到包含ev.stopPropagation（）的覆蓋。

所以用jQuery它看起來像：

$(document.body).bind('click.closeNote', function() { 
    $('.newnote').hide(); 
}); 
$('.newnote').bind('click.closeNote', function(ev) { 
    ev.stopPropagation(); 
});

另一種方法是增加一個透明的div（具有比記較低zIndex的），它覆蓋了整個頁面。然後你可以添加一個點擊事件監聽器到這個div來關閉音符。

編輯：請注意，上面的例子不是很高性能的，因爲它執行的每次點擊一個選擇。只需在顯示註釋時綁定此事件並在關閉時解除綁定。

來源

2012-07-31 14:14:15 Pascal

謝謝，很好的解決方案 - 當我點擊它，以及壽格關閉。我可能錯過了什麼ev.stopPropagation（） – David 2012-07-31 14:30:36

沒關係，明白了 - 再次感謝 – David 2012-07-31 14:35:51

太棒了！請你能將我的答案標記爲解決方案嗎？ – Pascal 2012-07-31 14:59:12

對外界關閉切換點擊

回答

相關問題