關閉切換外部點擊

Question

我對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>

謝謝

Answer 1

我通常要做的是向文檔主體添加一個click事件監聽器，以關閉覆蓋。 為了防止通過單擊來關閉覆蓋，我向包含ev.stopPropagation（）;的覆蓋添加了第二個click事件監聽器。

因此，使用jQuery時，它看起來像：

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

另一種方法是添加一個覆蓋整個頁面的透明div（zIndex低於注釋）。 然后，您可以在該div中添加一個click事件監聽器，以關閉筆記。

編輯：請注意，上面的示例效果不佳，因為它在每次單擊時都會執行選擇器。 僅在顯示便箋時綁定此事件，並在它們關閉時取消綁定。