DOM事件机制包括五部分:

  1. DOM事件级别
  2. DOM事件流
  3. DOM事件模型
  4. 事件代理
  5. Event对象常见的方法和属性

但是有时候发现给body标签里设置onclick属性,不起作用,代码如下:

不管单击页面什么地方都不会出现弹窗。

接着向body部分输入一些文字,代码如下:

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

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

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

既然body部分都已填满为什么只有文字部分响应鼠标单击事件,而其他地方失灵呢

这时想到给html也设置一下背景,看看什么情况。代码如下:

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

这时才理解为什么只有单击文字所占的这一行才能出现弹窗

新的问题来了,在给html设置背景时,如果让body充满页面,并且能够在页面任何地方响应鼠标单击事件,代码和效果图如下:

这时整个页面红色填满,而且页面任何地方可以响应鼠标单击。

body测试onclick等鼠标事件无效果详解的更多相关文章

  1. javascript event(事件对象)详解

    javascript event(事件对象)详解   1. 事件对象     1. 事件对象 Event 对象代表事件的状态,比如事件在其中发生的元素.键盘按键的状态.鼠标的位置.鼠标按钮的状态. 什 ...

  2. Android Touch事件传递机制详解 下

    尊重原创:http://blog.csdn.net/yuanzeyao/article/details/38025165 资源下载:http://download.csdn.net/detail/yu ...

  3. JQuery在循环中绑定事件的问题详解

    JQuery在循环中绑定事件的问题详解 有个页面上需要N个DOM,每个DOM里面的元素ID都要以数字结尾,比如说 ? 1 2 3 <input type="text" nam ...

  4. Android事件传递机制详解及最新源码分析——ViewGroup篇

    版权声明:本文出自汪磊的博客,转载请务必注明出处. 在上一篇<Android事件传递机制详解及最新源码分析--View篇>中,详细讲解了View事件的传递机制,没掌握或者掌握不扎实的小伙伴 ...

  5. Android开发——事件分发机制详解

    0. 前言   转载请注明出处:http://blog.csdn.net/seu_calvin/article/details/52566965 深入学习事件分发机制,是为了解决在Android开发中 ...

  6. jquery移除、绑定、触发元素事件使用示例详解

    这篇文章主要介绍了jquery移除.绑定.触发元素事件使用示例详解,需要的朋友可以参考下. unbind(type [,data]) //data是要移除的函数 $('#btn').unbind(&q ...

  7. Android事件分发机制详解

    事件分发机制详解 一.基础知识介绍 1.经常用的事件有:MotionEvent.ACTION_DOWN,MotionEvent.ACTION_MOVE,MotionEvent.ACTION_UP等 2 ...

  8. C#事件与委托详解

    from https://www.cnblogs.com/sjqq/p/6917497.html C#事件与委托详解[精华 多看看] Delegatedelegate是C#中的一种类型,它实际上是一个 ...

  9. Android 的事件传递机制,详解

    Android 的事件传递机制,详解 前两天和一个朋友聊天的时候.然后说到事件传递机制.然后让我说的时候,忽然发现说的不是非常清楚,事实上Android 的事件传递机制也是知道一些,可是感觉自己知道的 ...

随机推荐

  1. MyEclipse环境的项目改为在Eclipse中运行爬坑记【我】

      新检出一个web项目,同事都是运行在MyEclipse中的,我用Eclipse启动, 1.首先是许多jar包报错: 处理方法为 remove掉,然后 选 WEB-INF 下的所有 jar 重新添加 ...

  2. 3GPP 5G UPF

    目录 文章目录 目录 UPF 参考文档 UPF UPF(User Plane Function,用户面功能),是 3GPP 定义的 5G Core(核心网)基础设施系统架构的基本组成部分. UPF 从 ...

  3. Linux命令之ntpdate、hwclock

    ntpdate用于同步系统时间.hwclock用于同步硬件时间. (1).ntpdate ntpdate [选项] [时间服务器] 一般直接ntpdate [时间服务器] 常用的时间服务器:ntp[1 ...

  4. yum命令配置及使用说明和常见问题处理

    一. 重装yum 1. 执行如下命令,卸载yum命令程序 rpm -qa |grep yum |xargs rpm -e --nodeps 2. 依次执行如下命令,下载yum.yum-plugin-f ...

  5. Jenkins+gitlab+maven持续集成

    https://blog.csdn.net/tq08g2z/article/details/79718425 https://www.jianshu.com/p/3507d8b2ac87 报错用下面解 ...

  6. 在Ubuntu上安装Intellij IDEA并创建桌面快捷方式

    环境信息 版本号 Ubuntu 18.04 LTS Intellij IDEA 2019.1.3 1.首先从官网获取安装包 官方下载地址传送门 然后我就在下载目录下得到了tar.gz的包 2.接下来开 ...

  7. String类基础的那些事!

    第三阶段 JAVA常见对象的学习 第一章 常见对象--String类 (一) String 类的概述及其构造方法 (1) 概述 多个字符组成的一串数据,例如 "abc" 也可以看成 ...

  8. 【AtCoder】ARC067

    ARC067 C - Factors of Factorial 这个直接套公式就是,先求出来每个质因数的指数幂,然后约数个数就是 \((1 + e_{1})(1 + e_{2})(1 + e_{3}) ...

  9. TypeScript 解构

    ⒈解构数组 最简单的解构莫过于数组的解构赋值了: let input = [1, 2]; let [first, second] = input; console.log(first); // out ...

  10. WDS无人参与批量部署Ser 2008

    WDS无人参与批量部署Ser 2008 对于其它windows镜像采用此方法也是可以实现的: 1. 准备工作: 虚拟机server2012一个: 地址192.168.1.1/24 Server2008 ...