javascript - 如果用户在 div 外部单击，如何隐藏 div？

Question

我有一个按钮，点击它会改变 div 的可见性:

<button type="button" id="editbutton" onclick="plus()" alt="Edit"></button>

function plus() {
var f = document.getElementById('edit');
if (f.style.visibility == 'hidden') {
   f.style.visibility = 'visible';
   }
else
    f.style.visibility = 'hidden';
}

这很好用。但现在我想添加功能，以便如果用户单击 div 之外的任何地方，div 将恢复隐藏状态。

最初我尝试了自己的方法，但没有成功，因为每当我单击按钮使 div 可见时，它又被新代码隐藏了。我查看了其他人发布的一些 jQuery 示例，但是我尝试过的都没有解决这个问题。任何帮助我将不胜感激。

编辑:澄清一下，问题是因为 div 最初是通过用户单击按钮显示的，所以每当我单击按钮时，div 都会显示但立即再次隐藏，因为这算作单击页面正文。

Answer 1

当用户在您的 div 中单击时，您可以从单击事件处理程序中对该事件调用“e.stopPropagation()”——这将阻止该事件在 DOM 中“冒泡”。

然后，如果您将事件处理程序附加到监听点击的 BODY 元素，则可以使用该事件处理程序来隐藏 DIV；知道点击 DIV 本身不会将事件冒泡到 BODY 处理程序。

以这种方式，任何点击另一个元素，除非处理程序也调用 stopPropagation()，否则将被您的处理程序捕获。因此，如果在其他情况下您不希望 div 隐藏，您可以根据需要调用 stopPropagation() 来阻止它发生。

例如:

$("#edit-button").click( function(e) {
    $("#edit").toggle();
    e.stopPropagation();
});

$('#edit').click(function(e) {
    e.stopPropagation();
});

$("body").click( function(e) {
    $("#edit").hide();
});