Question

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将是隐藏我想编辑此代码如果我点击外部div，我想隐藏该div 我阅读了很多教程，但我不能那样做。

Answer 1

我认为实现这一目标的最佳方法是，使用jQuery为元素设置click事件，并在click事件的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.");
  }
});

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

Answer 2

我添加了一个带有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(); };

Answer 3

我曾经尝试过这样做，这就是我用过的东西

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

Answer 4

如果您不想阻止与网页的互动，您还可以将功能绑定到网页正文。如果您没有阻止点击事件的传播，则所有点击事件都会传播到元素的主体，因此您可以处理删除任何给定的div。

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

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

删除div后取消绑定功能也将阻止此功能在您单击页面上的任何内容时执行。

Answer 5

只需为返回false onclick的DIV添加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();
});

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

5 个答案: