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 的事件传递机制也是知道一些,可是感觉自己知道的 ...
随机推荐
- linux如何交叉编译i2c-tools?
1. 获取源码 wget https://mirrors.edge.kernel.org/pub/software/utils/i2c-tools/i2c-tools-4.1.tar.xz 2. 解压 ...
- vue2.0+vue-video-player实现hls播放的案例
1. 安装依赖. npm install vue-video-player --save 2. 在main.js引入vue-video-player. import VueVideoPlayer fr ...
- Linux学习:Makefile简介及模板
一.基本概念介绍: Makefile 文件就是告诉make命令需要怎么样的去编译和链接程序. 编写Makefile的基本规则: 1.如果这个工程没有编译过,那么我们的所有C文件都要编译并被链接. 2. ...
- WPF 设置TextBox为空时,背景为文字提示。
<TextBox FontSize="> <TextBox.Resources> <VisualBrush x:Key="HelpBrush" ...
- 反射序列化字段的时候,需要添加[Datamember]不然会,忽略这个字段
反射序列化字段的时候,需要添加[Datamember]不然会,忽略这个字段
- React Native使用code-push实现热更新
这里就不记录了,下面的传送门介绍的通俗易懂,很详细,一步一步很容易实现成功. http://www.jianshu.com/p/f8689ccf0007
- MLN 讨论 —— 基础知识
一. MLN相关知识的介绍 1. First-order logic A first-order logic knowledge base (KB) is a set of formulas in f ...
- js 高级程序设计 第三章学习笔记——Number数据类型需要注意的事项
1.浮点数值 虽然小数点前面可以没有整数,但是并不推荐这种写法. 由于保存浮点数值需要的内存空间是保存整数值的两倍,因此ECMAScript会不失时机地将浮点数值转化为整数数值.显然,如果小数点后面没 ...
- 使用STM32F103ZET霸道主板实现LCD显示屏显示
简单了解液晶显示屏 液晶显示屏LCD是靠背光LED发光,然后经过横竖透光,每个点电压可以改变光线的方向,总之能改变透光度0-100%,最后就是每个像素点对应红绿蓝RGB,RGB各自的亮度不同,组成的颜 ...
- postman 发送json 格式数据
hearder 设置 body 设置 { ", "primary_content": "{\"SN\":129,\"MPBH\&q ...