                        课程
                    
                        /前端开发
                        
                            /jQuery
                        
                        /jQuery基础(二)—DOM篇

刚开始点击body空白处并没有效果~

刚开始的时候跟很多人遇到的问题一样，那就是点击body空白处的时候，并没有任何反应。但是如果先点击button之后，再点击body空白处就有效果了。很困惑为什么会这样？从代码上看明显是给body元素绑定了click事件，那为什么刚开始点body的空白处没效果呢？

偶然间看到有大神回复说是因为刚开始的时候body的高度只到button下面为止，点击button下面的空白是没效果的，需要点击button后面的空白才会有效。试了一下，发现确实是这样，初想一下感觉貌似确实是这个道理。但再深一步的验证下，发现貌似又不是这样。验证方法如下：

”给body加上background-color“

发现整个浏览框(不止是button，还包括button下面的所有空白处)都有背景色，证明刚开始body的高度并不是只到button下面为止。这时我就很纳闷了~到底该如何理解？很困惑~望各位大神指导~

gaoboss

2017-01-12

源自：jQuery基础(二)—DOM篇 2-2

关注问题我要回答

1151

操作

收起

9 回答

青黄不一
2017-06-08

很好理解吧。给body增加个样式。就知道body的位置在哪里了。js代码中的对象是body，是对body的点击触发事件的，所以你点击body以外的区域是没有反应的，而在body区域中的随处一个地方点击都是会触发事件。

0 回复有任何疑惑可以回复我~

收起回答

星yee_爷
2017-03-21

楼上不知后觉大兄弟正解

0 回复有任何疑惑可以回复我~

收起回答

星yee_爷
2017-03-21

楼上正解

0 回复有任何疑惑可以回复我~

收起回答

不知不觉后知后觉嗯
2017-02-15

上面的解释都有点问题，你问到的大神给你的回复是正确的，至于为什么会出现你最后的这个疑惑，这个问题就牵扯到了对<body>和<html>这两个标签的理解。

为什么你给body设置颜色以后，浏览器的背景全都会变成红色？

因为此时html标签没有被激活，此时的body成了根节点的节点，它的背景颜色被浏览器捕获，所以你看到的页面全为红色是浏览器的背景色。，再说一下，是浏览器的背景色。

当你给html标签设置背景色为绿色后，会发现，浏览器的背景颜色变成了绿色，而红色只覆盖到button标签下面，因为此时浏览器捕获到的根节点的节点是html，所以它的背景色就成了浏览器的背景色。

这就很容易理解为什么点击button下面的部分的时候没有反应，而点击上面的部分div就会出现。

2 回复有任何疑惑可以回复我~

收起回答

七戒0
2017-01-17

我又来了，信不信这回好使。这个和 <script type="text/javascript">的位置有关，你写成外联就会完全好使了，因为写在body里是随着那些页面元素一起加载的，他后面的空白是不受那个javascript函数的控制，写在body里的javascript函数只对前面的页面元素有效。

0 回复有任何疑惑可以回复我~

收起回答

桃太郎
2017-01-15

用这个<script src="http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js">点哪都没用。用这个<script src="http://libs.baidu.com/jquery/1.9.1/jquery.js">才是你说的“蓝色区域的click都是有效的”。应该是它的原因。——火狐浏览器

0 回复有任何疑惑可以回复我~

收起回答

gaoboss 提问者

我用Chrome 版本："51.0.2704.103 m" 示例中的script的链接是可以直接用的蓝色区域的click是有效的~

2017-01-16 回复有任何疑惑可以回复我~