Javascript 单击div之外的任意位置时隐藏div

CSS

JS

HTML

你好就像我们那么接近
x
嗨，像我们这样的朋友别忘了加入我们的社区
喜欢我们&靠近这里>>>>>>

现在我有了这个完整的HTML CSS Javascript代码，如果我点击“X”，div将被隐藏 我想编辑此代码，如果我在div之外单击，我想隐藏该div

---

我读了很多教程，但我做不到。

我添加了一个ID为»overlay«的div，该div覆盖了所有其他div，除了在其外部单击要关闭的div。然后，我添加了一小段JavaScript，上面写着在单击覆盖时关闭div。因此，将此添加到您的代码中：

HTML

JavaScript

#overlay { z-index:1000;position:fixed;top:0;left:0;width:100%;height:100%; }

---

只需为返回false onclick的DIV添加一个onclick事件，以及一个jquery click事件，当您单击页面时会触发，如下所示：

HTML

---

我曾经试着做同样的事情，这就是我所用的

$(document).click(function(){
    getValue();
});

---

如果不想阻止与页面的交互，还可以将函数绑定到页面主体。如果不阻止click事件的传播，则所有click事件都将传播到元素的主体，因此可以通过这种方式处理删除任何给定div的操作

$(document).ready(function(){
$(document).click(function(e){
    if ($(e.target).is('#headlineatas,#headlineatas *')) {
        return;
    }
    else
    {
        document.getElementById("headlineatas").style.display = 'none';
    }
});
});

---

移除div后从主体中解除绑定函数也将停止每隔单击页面上的任何内容时执行此函数。

我认为最好的方法是使用jQuery为元素设置一个单击事件，并在lambda函数中为单击事件设置一个单击事件，停止传播，以便在单击它时，不会单击它的父对象

var clickFunction = function(){
    $('#divToDelete').remove();
    body.unbind('click', clickFunction);
}

//Call this when you create #divToDelete
$('body').bind('click', clickFunction);

然后，为整个主体（一个元素除外）创建一个单击事件

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

但是，如果不使用jQuery，可以执行以下操作：

$('body').not('div').on('click', function() {
  // do stuff
});

---

创建一个条件语句，允许您检查单击事件的目标是否等于元素。当它相等时，你什么都不做，当它不相等时，你可以隐藏div或做任何你想做的事情。

请还包括一个jsFiddle，以便人们可以调试它。你能调试100行代码而不让它运行吗？这似乎不符合人们的要求。也许我不明白这个问题？有可能我把他要的东西搞砸了。对不起，我会投反对票的。我认为这根本没有效率。你应该用HellaFont的答案，管好你自己的事。我把这个答案作为第二个贴出来，它是有效的。如果它奏效，就不应该被否决。人们应该开始投票给好的答案，而不是投票给“不太好”的答案。天哪，现在的人们。。。。。。。

<div id="btftopbar" onclick='return false;'>
<img align="left" style="padding-right:2px;" src="http://4.bp.blogspot.com/-vzd4PC3mEFk/T-sufsJgLxI/AAAAAAAAAN4/knJUIQkvjtE/s300/blogtariff.com.png" />
<span style="color:#fff;font-size:13px;font-weight:bold;text-shadow:black 0.1em 0.1em 0.1em">Hi ..! Like us then Close</span>

<span style="color:#fff;font-size:13px;font-weight:bold;text-shadow:black 0.1em 0.1em 0.1em;float:right;padding-top:340px;padding-right:-5px">
<b>
<a onclick="getValue()">x</a></b></span>
</div>

$(document).click(function(){
    getValue();
});

$(document).ready(function(){
$(document).click(function(e){
    if ($(e.target).is('#headlineatas,#headlineatas *')) {
        return;
    }
    else
    {
        document.getElementById("headlineatas").style.display = 'none';
    }
});
});

var clickFunction = function(){
    $('#divToDelete').remove();
    body.unbind('click', clickFunction);
}

//Call this when you create #divToDelete
$('body').bind('click', clickFunction);

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

$('body').not('div').on('click', function() {
  // do stuff
});

var elem = document.querySelector('#element');

document.body.addEventListener('click', function(e) {
  if (e.target == elem) {
    console.log("Clicked the Element");
  } else {
    console.log("Clicked something other than the Element.");
  }
});