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（）来阻止它发生。

E.g：

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

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

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

Answer 2

在body元素上设置点击处理程序。如果您可以检查event.target以查看它是否与div匹配，如果匹配：不执行任何操作，否则：隐藏它。

document.body.onclick = function(event) {
    if (event.target === f) {
        // user clicked on the div, do nothing
    } else {
        f.style.visibility = "hidden";
    }
};

如果您在编辑div中有元素（并且.target不匹配），这会变得有点复杂，但我相信您可以提出解决方案:)（它可以做到。）

Answer 3

你似乎知道自己在做什么，所以我会把它简短。

在jquery中编写一个.click函数。

你给你的按钮一个id（或它所在的div）

$('#buttonidordiv').click(function(){
 $('#divtoshow').show() // put in a number to create a fade in seconds.
//your stuff here
}

如果有人点击它以外的任何地方......我认为你应该能够使用窗口。否则你可以使用另一个div（比如你的包装器）。

所以

$('window').click(function(){
$('#samediv').hide() //same as above
//your stuff here

}

确实意识到，我对)};感到厌烦，所以你可能不得不在某处添加其中一个;）

祝你好运！

如果用户点击div之外，如何隐藏div？

3 个答案: