对外界关闭切换点击

我还是很新的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

对外界关闭切换点击

回答

相关问题