单击 div 之外的任何位置时隐藏 div [重复]

Posted 2023-03-05

【中文标题】单击 div 之外的任何位置时隐藏 div [重复]

【英文标题】：Hide div when clicking anywhere outside of div [duplicate]

【发布时间】：2014-09-07 08:56:49

【问题描述】：

CSS

    #apDiv1 
        position:absolute;
        left:863px;
        top:201px;
        width:59px;
        height:47px;
        z-index:1;
    

    #btftopbar 
    height:30px;
    width:auto;
    background: #005094 url('..');
    background-repeat:repeat-x;
    text-align:left;
    padding-top:4px;
    padding-top:20px;
    
    #adsground 
    height:400px;
    margin:0 auto;
    width: 700px;
    background:#e5e5e5;
    border-bottom:2px #005094 solid;
    border-right:2px #005094 solid;
    border-left:2px #005094 solid;
    text-align:center;
    padding:4px;
    

    #headlineatas 
    opacity:1.0;
    height:auto;
    width:auto;
    position:fixed;
    top:65px;
    left:200px;
    border-bottom:1px #005094 solid;
    border-bottom:0px blue solid;
    color:#333;
    padding:0px;
    z-index:1001;
    font-size:13px;
    #apDiv2 
        position:absolute;
        left:907px;
        top:208px;
        width:247px;
        height:300px;
        z-index:1;
        background-color: #999999;
    
    #apDiv2 
        color: #F00;
    
    #apDiv3 
        position:absolute;
        left:330px;
        top:216px;
        width:361px;
        height:244px;
        z-index:2;
    

JS

function getValue()

    document.getElementById("headlineatas").style.display = 'none';

html

    <div id="headlineatas">
    <div id="btftopbar">
    <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>
    <div id="adsground">

    <center>
    <b><a class="KBTricks"><h3>Hi Friends Like US  </h3>  Don't Forget To Join With Our Community</a></b> 

    <center>
    <iframe src=""></iframe>
    <iframe src=""></iframe>

    <div id='close' style="float:right; overflow:hidden;font-style:bold;">
    <h1>
    <b> Like us & Close Here>>>>>>  </b></h1> </br>
    </div>

    </center></center></div></div>
    </div>

现在我有这个完整的 HTML CSS javascript 代码，如果我点击“X”，div 将被隐藏 我想将此代码编辑为如果我单击 Outside Of div ，我想隐藏那个 div 我读了很多教程，但我做不到。

【问题讨论】：

请同时包含一个 jsFiddle 以便人们调试它。你能调试 100 行代码而不看它运行吗？

【参考方案1】：

我添加了一个 ID 为 »overlay« 的 div，它覆盖了所有其他 div，除了当您在其外部的任意位置单击时要关闭的 div 之外。然后我添加了一小段 JavaScript，当单击该叠加层时关闭 div。因此，将其添加到您的代码中：

HTML

<div id="overlay"></div>

CSS

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

JavaScript

document.getElementById('overlay').onclick = function() SetValue(); ;

【参考方案2】：

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

HTML

<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>

JS

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

【讨论】：

这似乎不符合这个人的要求。也许我错过了理解这个问题？

我可能搞砸了他的要求。对不起，我会投票支持

我认为这根本没有效率。您应该使用 HellaFont 的答案。

管好你自己该死的生意。我将此答案发布为第二个，并且有效。如果它有效，它不应该被否决。人们应该开始对好的答案投赞成票，并停止对“不太好的”答案投反对票。天哪，现在的人们.......

【参考方案3】：

我曾经尝试做同样的事情，这就是我使用的

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

【参考方案4】：

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

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


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

在删除 div 后从正文中取消绑定函数也会在您每隔一次单击页面上的任何内容时停止执行此函数。

【参考方案5】：

我认为实现这一点的最佳方法是，使用 jQuery，为元素设置一个点击事件，并在 lambda 函数中为点击事件设置一个点击事件，停止传播，这样当它被点击时，它的父母不会被点击.

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

然后，为除了一个元素之外的整个正文创建一个点击事件。

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

但是，如果你不使用 jQuery，你可以这样做：

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.");
  
);

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