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 的事件传递机制也是知道一些,可是感觉自己知道的 ...
随机推荐
- 如何从社区的patchwork下载补丁并应用到当前内核源码?
1. 下载 wget http://patchwork.ozlabs.org/series/111111/mbox 2. 打补丁 git am mbox
- Docker-compose的安装和使用
一.简介 Compose 项目 是 Docker 官方的开源项目 , 负 责实 现对 Docker 容器 集群的快速编排,其前身 是开源项目 Fig, 目前仍然兼容 Fig格式的模板文件. 使用 一个 ...
- kotlin嵌套类
就是类中定义类 package loaderman.demo class Outer { var name: String = "name" inner class inner { ...
- 阶段5 3.微服务项目【学成在线】_day02 CMS前端开发_12-webpack研究-webpack安装
npm默认安装配置的路径配置在nodejs的node_modules目录 j加上 -g 就是全局安装 后面只写webpack默认安装的是最新版本 指定版本号 视频中建议指定版本号进行安装
- 升级系统中的java到1.8版本
(1).安装或升级java,并配置环境变量 注意:此处分为yum安装与rpm安装,区别在于yum安装省事但配置麻烦,rpm安装麻烦但配置省事. 1)yum安装 在安装前可以使用yum list ins ...
- scikit-learn机器学习(二)逻辑回归进行二分类(垃圾邮件分类),二分类性能指标,画ROC曲线,计算acc,recall,presicion,f1
数据来自UCI机器学习仓库中的垃圾信息数据集 数据可从http://archive.ics.uci.edu/ml/datasets/sms+spam+collection下载 转成csv载入数据 im ...
- ffprobe读取音视频元数据信息,json格式输出
命令格式: ffprobe -v quiet -show_format -show_streams -print_format json F:\temp\test1566606924822.wav 输 ...
- 【leetcode】520. Detect Capital
problem 520. Detect Capital 题意: 题目中给出的三种情况,分别是全是大写.全是小写.首字母大写,这三种情况返回True;否则返回False; solution: class ...
- java内存回收需要了解的知识
你是否有过这样的经历,跑得好好的Java进程,突然就瘫痪了?多数Java进程瘫痪的原因可以从java虚拟机层面找到原因. 1.什么情况下会执行gc 为了了解我们的系统为什么会不停fgc,我们需要先了解 ...
- POJ 2195 Going Home 【最小费用最大流】
题目链接:http://poj.org/problem?id=2195 Time Limit: 1000MS Memory Limit: 65536K Total Submissions:2715 ...