javascript - 单击主 div 更改整个页面的背景颜色

Question

我尝试更改整个页面的背景颜色，点击我的 ID 为 main 的 div。这是 my code :

$(document).ready(function() {

    var color = 1;
            
    $('#main').click(function(){
        if (color == 1)   {
            $(this).css("background-color", "green");
            color = 2;
        } else if (color == 2) {
            $(this).css("background-color", "black");
            color = 1;
        }                 
    });
});

#admin_div {
    position: absolute;
    width: 80%;
    height: 80%;
    border: 2px solid white;
    border-radius: 10px;
    background-color: #D9D9D9;
    z-index: 1;
}   

h1 { 
  margin-left: 15px; 
}

#main {
	height: 100%;
	width: 100%;
	z-index: 0;
}

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<div id="main">
    <div id="admin_div">		
		    <h1>Admin Panel</h1>
	  </div>
</div>

但是如果我点击另一个元素而不是主元素，背景颜色也会改变。我认为这是因为所有内容都在主 div 中。

Answer 1

点击红色(目标 div)一切都像预期的那样

http://jsfiddle.net/22m0to5o/1/

var color = 1;

$('#main').click(function (event) {

    if (event.target !== this) return;

    if (color == 1) 
    {
        $('body').css("background-color", "green");
        color = 2;
    } 
    if (color == 2) 
    {
        $('body').css("background-color", "black");
        color = 1;
    }

});