javascript - 在图像外部单击时隐藏 div

Question

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

Answer 1

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

非常简单的例子

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 (); });

请记住更改选择器以满足您的需求。