刚开始点击body空白处并没有效果~
gaoboss
2017-01-12 16:32
刚开始的时候跟很多人遇到的问题一样，那就是点击body空白处的时候，并没有任何反应。但是如果先点击button之后，再点击body空白处就有效果了。很困惑为什么会这样？从代码上看明显是给body元素绑定了click事件，那为什么刚开始点body的空白处没效果呢？
偶然间看到有大神回复说是因为刚开始的时候body的高度只到button下面为止，点击button下面的空白是没效果的，需要点击button后面的空白才会有效。试了一下，发现确实是这样，初想一下感觉貌似确实是这个道理。但再深一步的验证下，发现貌似又不是这样。验证方法如下：
”给body加上background-color“
发现整个浏览框(不止是button，还包括button下面的所有空白处)都有背景色，证明刚开始body的高度并不是只到button下面为止。这时我就很纳闷了~到底该如何理解？很困惑~望各位大神指导~
9回答
-
- 青黄不一
- 2017-06-08 16:55:10
很好理解吧。给body增加个样式。就知道body的位置在哪里了。js代码中的对象是body，是对body的点击触发事件的，所以你点击body以外的区域是没有反应的，而在body区域中的随处一个地方点击都是会触发事件。
-
- 星yee_爷
- 2017-03-21 22:06:36
楼上不知后觉大兄弟正解
-
- 星yee_爷
- 2017-03-21 22:05:26
楼上正解
-
- 不知不觉后知后觉嗯
- 2017-02-15 11:21:48
上面的解释都有点问题，你问到的大神给你的回复是正确的，至于为什么会出现你最后的这个疑惑，这个问题就牵扯到了对<body>和<html>这两个标签的理解。
为什么你给body设置颜色以后，浏览器的背景全都会变成红色？
因为此时html标签没有被激活，此时的body成了根节点的节点，它的背景颜色被浏览器捕获，所以你看到的页面全为红色是浏览器的背景色。，再说一下，是浏览器的背景色。
当你给html标签设置背景色为绿色后，会发现，浏览器的背景颜色变成了绿色，而红色只覆盖到button标签下面，因为此时浏览器捕获到的根节点的节点是html，所以它的背景色就成了浏览器的背景色。
这就很容易理解为什么点击button下面的部分的时候没有反应，而点击上面的部分div就会出现。
-
- 七戒0
- 2017-01-17 15:46:28
我又来了，信不信这回好使。这个和 <script type="text/javascript">的位置有关，你写成外联就会完全好使了，因为写在body里是随着那些页面元素一起加载的，他后面的空白是不受那个javascript函数的控制，写在body里的javascript函数只对前面的页面元素有效。
-
- 桃太郎
- 2017-01-15 18:16:17
用这个<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都是有效的”。应该是它的原因。——火狐浏览器
-
- 而上
- 2017-01-13 12:04:51
on()绑定事件 body中包含bottom控件 则按钮可以将它们的 Click 事件转发给包含控件。这样，按钮实现绑定控件定义的自定义功能 我是这样认为的 不知道对不对
-
- gaoboss
- 2017-01-12 17:14:35
经验证，发现下图中蓝色区域的click都是有效的，红色区域的部分click都是无效的~
-
- 七戒0
- 2017-01-12 16:48:26
点击有效标签，包括空白标签，才能激发 $body.on('click', function()，
你点击最左边的红色区域，就不会激发$body.on('click', function()，，因为那里不是默认的空白标签，但是右边就可以，因为那里默认
jQuery基础(二)—DOM篇
114004 学习 · 614 问题
相似问题