body测试onclick等鼠标事件无效果详解
DOM事件机制包括五部分:
- DOM事件级别
- DOM事件流
- DOM事件模型
- 事件代理
- Event对象常见的方法和属性
但是有时候发现给body标签里设置onclick属性,不起作用,代码如下:

不管单击页面什么地方都不会出现弹窗。
接着向body部分输入一些文字,代码如下:

这时只有单击文字所占的这一行才能出现弹窗,其他地方不可以

这时就想到给body设置背景看看情况。

发现设置背景后整个页面都是红色填满

既然body部分都已填满为什么只有文字部分响应鼠标单击事件,而其他地方失灵呢
这时想到给html也设置一下背景,看看什么情况。代码如下:

令人意外的事情发生了,整个页面都是html标记的绿色,而body只是一个长条

这时才理解为什么只有单击文字所占的这一行才能出现弹窗
新的问题来了,在给html设置背景时,如果让body充满页面,并且能够在页面任何地方响应鼠标单击事件,代码和效果图如下:


这时整个页面红色填满,而且页面任何地方可以响应鼠标单击。
body测试onclick等鼠标事件无效果详解的更多相关文章
- javascript event(事件对象)详解
javascript event(事件对象)详解 1. 事件对象 1. 事件对象 Event 对象代表事件的状态,比如事件在其中发生的元素.键盘按键的状态.鼠标的位置.鼠标按钮的状态. 什 ...
- Android Touch事件传递机制详解 下
尊重原创:http://blog.csdn.net/yuanzeyao/article/details/38025165 资源下载:http://download.csdn.net/detail/yu ...
- JQuery在循环中绑定事件的问题详解
JQuery在循环中绑定事件的问题详解 有个页面上需要N个DOM,每个DOM里面的元素ID都要以数字结尾,比如说 ? 1 2 3 <input type="text" nam ...
- Android事件传递机制详解及最新源码分析——ViewGroup篇
版权声明:本文出自汪磊的博客,转载请务必注明出处. 在上一篇<Android事件传递机制详解及最新源码分析--View篇>中,详细讲解了View事件的传递机制,没掌握或者掌握不扎实的小伙伴 ...
- Android开发——事件分发机制详解
0. 前言 转载请注明出处:http://blog.csdn.net/seu_calvin/article/details/52566965 深入学习事件分发机制,是为了解决在Android开发中 ...
- jquery移除、绑定、触发元素事件使用示例详解
这篇文章主要介绍了jquery移除.绑定.触发元素事件使用示例详解,需要的朋友可以参考下. unbind(type [,data]) //data是要移除的函数 $('#btn').unbind(&q ...
- Android事件分发机制详解
事件分发机制详解 一.基础知识介绍 1.经常用的事件有:MotionEvent.ACTION_DOWN,MotionEvent.ACTION_MOVE,MotionEvent.ACTION_UP等 2 ...
- C#事件与委托详解
from https://www.cnblogs.com/sjqq/p/6917497.html C#事件与委托详解[精华 多看看] Delegatedelegate是C#中的一种类型,它实际上是一个 ...
- Android 的事件传递机制,详解
Android 的事件传递机制,详解 前两天和一个朋友聊天的时候.然后说到事件传递机制.然后让我说的时候,忽然发现说的不是非常清楚,事实上Android 的事件传递机制也是知道一些,可是感觉自己知道的 ...
随机推荐
- code review 20190705
命名规范: 做了什么? 目的是什么? 在什么基础上进行? 注释说明 sql update,where 先行????? 警告: 清空所有警告:所有隐藏比较深入的bug,都是由警告带来的 + 忽略警告 枚 ...
- windows10下idea快捷键文件
没详细测试. https://my.oschina.net/superwen/blog/833482 |快捷键|英文说明|说明|冲突 |---|---|--| |Ctrl + Shift + F||根 ...
- jQuery ajax表单提交
Jquery的$.ajax方法可以实现ajax调用,要设置url,post,参数等. 如果要提交现有Form需要写很多代码,何不直接将Form的提交直接转移到ajax中呢. 以前的处理方法 如Form ...
- GCE 部署 ELK 7.1可视化分析 nginx
目录 一.准备 1.1.服务器环境准备 二.安装 ES 2.1.遇到小问题 三.安装 Kibana 四.安装 Logstash 一.准备 我这边有一个网站放在了 Google VM 上面,所以打算在购 ...
- webdriervAPI(定位一组元素)
通过定位一组元素的方法来,来勾选自己需要勾选的选项. from selenium import webdriver from selenium.common.exceptions import NoS ...
- 教你用免费的hihttps开源WEB应用防火墙阻止暴力破解密码
教你用免费的hihttps开源WEB应用防火墙阻止暴力破解密码 很多企业都有自己的网站,需要用户登录后才能访问,但有大量的黑客攻击软件可以暴力破解网站密码,即使破解不了也非常恶心.有没有免费的解决办法 ...
- manjaro Docker环境配置记
1.系统配置如下: ‘by: /home/inkhin/桌面/深度截图_选择区域_20191004145104.png [吐槽: ChromeLinux版居然不能用博客园TinyMce的上传图片功能] ...
- NDK学习笔记-JNI的引用
JNI中的引用意在告知虚拟机何时回收一个JNI变量 JNI引用变量分为局部引用和全局引用 局部引用 局部引用,通过DeletLocalRef手动释放对象 原因 访问一个很大的Java对象,使用之后还用 ...
- eNSP——交换机基础配置
原理: 交换机之间通过以太网电接口对接时需要协商一-些接口参数, 比如速率.双工模式等.交换机的全双工是指交换机在发送数据的同时也能够接收数据,两者同时进行.就如平时打电话一样,说话的同时也能够听到对 ...
- 测试sigaction重启动标识
#include <stdio.h>#include <unistd.h>#include <signal.h>#include <string.h># ...