Question

当我单击Background div（SearchBlur）时，我想关闭一个Div。我的问题是，如果我点击显示的div，它也会关闭。

这是我的javascrip代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf8mb4">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Messaging Tool </title> 
    <link rel="icon" href="web/ico/panda.png"> 
    <meta name="description" content="A simple messaging system.">
    <meta name="keywords" content=""> 
    <meta name="author" content="Ace"> 
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="css/style.css">
    <link rel="stylesheet" type="text/css" href="css/custom.css">

    <script type="text/javascript" src="js/jquery.min.js"></script>

    <script type="text/javascript" src="js/bootstrap.min.js"></script>
    <!--Font-Awesome-->
    <link rel="stylesheet" type="text/css" href="assets/font-awesome-4.7.0/css/font-awesome.min.css">
    <!--Daneden Animate CSS-->
    <link rel="stylesheet" type="text/css" href="assets/daneden-animatecss/animate.css">
    <!--PNotify-->
    <link rel="stylesheet" type="text/css" href="assets/PNotify/pnotify.custom.min.css">
    <script type="text/javascript" src="assets/PNotify/pnotify.custom.min.js"></script>
    <!--emojionearea-->
    <link rel="stylesheet" type="text/css" href="assets/emojionearea-master/dist/emojionearea.css">
    <script type="text/javascript" src="assets/emojionearea-master/dist/emojionearea.js"></script>
    <!--Validator-->
    <script type="text/javascript" src="assets/form_validator/validation.min.js"></script>
    <!--TitleNotifier.js-0.9  
    <script type="text/javascript" src="assets/TitleNotifier.js-0.9/title_notifier.js"></script>-->      
    <script type="text/javascript" src="js/blink.min.js"></script>
    <!--Custom-->
    <link rel="stylesheet" type="text/css" href="web/css/custom.css">

</head>
<body>

这是我的html

SearchBlur.addEventListener('click', closePopup);

function closePopup(){

   if(counter == 1){
        $( "#search_input" ).animate({ "left": "-=300px"}, "normal" );
        $('.SearchBlur').fadeOut("normal");
        counter = 0;
    }

}

程序看起来像这样

我想关闭弹出窗口，因为我单击深色背景

对不起，我的英语不好：D

Answer 1

尝试使用以下代码将侦听器添加到子div

event.stopPropagation();

Answer 2

使用event.stopPropagation(); onclick您想要的孩子

var counter = 1;
$( ".SearchBlur" ).on( "click", function() {
 if(counter == 1){
        $( "#search_input" ).animate({ "left": "-300px"}, "normal" );
        $('.SearchBlur').fadeOut("normal");
        counter = 0;
    }
});
$( ".div_container" ).on( "click", function() {
 event.stopPropagation();
});

.SearchBlur{
background:blue;
}
.div_container{
width:100px;
background:red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="SearchBlur" id="SB_Back">
    <div class="div_container" id="container">
        <div class="grid_div">
                <div id="gridwrapper">div_container
                </div>
                </div>
            </div>
        </div>

Answer 3

您要关闭哪个div？

据我所知，您正在淡出最高级别的div，因此嵌套在SearchBlur中的所有标记也将被隐藏。我假设您想定位更深层的div，例如：

function closePopup(){
   if(counter == 1){
        $( "#search_input" ).animate({ "left": "-=300px"}, "normal" );
        $('.div_container').fadeOut("normal");
        counter = 0;
    }
}

Answer 4

以简单的方式，您的html如下所示：

$('.blur').on('click', function (e){
  if (e.target === this)
    $(this).fadeOut();
});

您的JS就是这样：

df

这是codepen：https://codepen.io/alexmoronto/pen/xaKvxg

单击背景div时关闭div

4 个答案: