Question

我有一个包含多个隐藏div的网页。我设置它们，以便在单击图像时显示它们，如果再次单击图像，它们将隐藏。问题是，如果它们可见并且点击了页面的任何部分，我需要隐藏它们。我已经搜索了高低，并找到了一些建议，但还没有找到一个有效的。有人可以帮忙吗？

Answer 1

$(window).click(function() {
    $('img').hide();
});

Very simple example

Answer 2

我通常绑定一个document.click事件来监听外部的点击，然后在窗口关闭时将其删除。

// in function after your image shows up.
document.click = hideImage;
// other code to hide image when image is clicked

// in function after your image is hidden.
document.click = null;

如果您正在使用jQuery，则更容易，因为您可以命名事件以便安全添加和删除。

// in function after your image shows up.
$(document).bind('click.imagehide', hideImage);
// other code to hide image when image is clicked

// in function after your image is hidden.
$(document).unbind('click.imagehide');

此方法更安全，因此您不会干扰绑定到document的其他点击事件。

Answer 3

您需要做的是防止事件冒泡。如果你使用jquery，你可以这样做：

$(document).on ('click', function () { $('div').hide (); });
$('img').on ('click', function (e) { e.stopPropagation (); });

记得改变选择器以满足您的需求。

单击图像外部时隐藏div

3 个答案: