html元素双击事件触发机制猜想及疑惑
今天有个同事遇到一个奇怪的问题，我照着他的代码做了一些简化写了这个demo
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
div{position: absolute;top: 0;left: 0;height: 50px}
#back{background-color: blue;left: 20px;width: 200px;z-index: 0}
#front{background-color: green;top:10px;width: 100px;z-index: 1}
</style>
</head>
<body>
<div id="back"></div>
<div id="front"></div>
<script type="text/javascript">
document.getElementById("back").addEventListener("click", function () {
console.log("back clicked");
})
document.getElementById("front").addEventListener("click", function () {
console.log("front clicked");
this.setAttribute("style", "z-index:0");
document.getElementById("back").setAttribute("style", "z-index:1");
})
document.getElementById("back").addEventListener("dblclick", function () {
console.log("back double clicked");
})
document.getElementById("front").addEventListener("dblclick", function () {
console.log("front double clicked");
})
</script>
</body>
</html>
代码的逻辑大致是这样的：
首先，页面中绿色方块为front，蓝色方块为back。系统的需求是，在绿色方块上单击时，切换两个方块覆盖方式（也就是点击front后back会跑到front前面）。同时，还需要在双击蓝色方块时实现另一个功能逻辑。
于是这哥们很自然了写了类似上面的代码就提交了。没多久，测试MM提了一个bug：“双击绿色方块时，不应触发双击蓝色方块的逻辑”。
后来我自己测了一下，果然如测试MM所说，当双击绿色和蓝色方块重叠的区域时，控制台会打印出这样的log：
浏览器会先触发front click，然后是back click，再然后居然是back double click。按理说，在back上面只点击了一次，应该不触发double click才对，毕竟第一次click是在front上触发的。
所以，我大胆猜想，浏览器本身并不会去判定鼠标是否触发双击事件，双击事件是由操作系统直接分发给浏览器的。当浏览器收到操作系统发来的双击消息时，直接根据该双击事件中的坐标去页面中找命中的元素，并在这个元素上触发js中的双击事件。
操作系统在判断是否发生双击时，并不知道第一次click和第二次click的目标不是同一个元素，所以只要两次click的间隔足够短就认为构成双击事件。而浏览器在收到操作系统发来的双击事件时，并没有去检测这次双击是由那两次单击所产生，而是直接根据双击事件的坐标信息将这个事件分发到相应的html元素上了。
为验证这个猜想，我又写了一个demo
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
body{transition:padding-left 8s linear;padding-left: 0}
div{width: 10px;height: 200px;background-color: blue;display: inline-block;float: left;}
</style>
</head>
<body>
<div id="div_00"></div>
<div id="div_01"></div>
<div id="div_02"></div>
<div id="div_03"></div>
<div id="div_04"></div>
<div id="div_05"></div>
<div id="div_06"></div>
<div id="div_07"></div>
<div id="div_08"></div>
<div id="div_09"></div>
<div id="div_10"></div>
<div id="div_11"></div>
<div id="div_12"></div>
<div id="div_13"></div>
<div id="div_14"></div>
<div id="div_15"></div>
<div id="div_16"></div>
<div id="div_17"></div>
<div id="div_18"></div>
<div id="div_19"></div>
<div id="div_20"></div>
<div id="div_21"></div>
<div id="div_22"></div>
<div id="div_23"></div>
<div id="div_24"></div>
<div id="div_25"></div>
<div id="div_26"></div>
<div id="div_27"></div>
<div id="div_28"></div>
<div id="div_29"></div>
<script type="text/javascript">
var divs = document.getElementsByTagName("div");
for(var i = 0, length = divs.length; i < length; i++){
divs[i].addEventListener("click", function () {
console.log("clicked", this.id);
});
divs[i].addEventListener("dblclick", function () {
console.log("double clicked", this.id);
});
} setTimeout(function(){
document.body.setAttribute("style", "padding-left:300px");
}, 1000);
</script>
</body>
</html>
当页面中的蓝色方块开始移动后，在蓝色方块上双击鼠标，可以多试几次，得到下面的结果：
可以看到，div_26、div_22两次双击事件分别是由div27、div26和div23、div22的两次单击触发的。
从这两个结果来看，确实是符合我的猜想的。
不过，这个demo也带来了一些疑惑：
1、clicked div_19 这个log打印的时候，我非常确定我点击了两次鼠标，但是只打出了这一个log，为什么？
2、double clicked div_15和double clicked div_11这两次双击事件触发前，都只触发了一次click事件，这又是为什么？
以上所有代码测试结果都是基于 Chrome 33 和 IE 11 运行环境。
希望有高人指导，也欢迎大家各抒己见。
如需转载，请注明转自：http://www.cnblogs.com/silenttiger/p/3578397.html
欢迎关注我的微信公众号：老虎的小窝
html元素双击事件触发机制猜想及疑惑的更多相关文章
- 【深入浅出Linux网络编程】 “基础 -- 事件触发机制”
回顾一下“"开篇 -- 知其然,知其所以然"”中的两段代码,第一段虽然只使用1个线程但却也只能处理一个socket,第二段虽然能处理成百上千个socket但却需要创建同等数量的线程 ...
- C#事件触发机制
C#的事件触发机制,类似于c++的回调函数机制 我先简单说一下,委托和事件的实质,后期再重开一篇博文来详细说 委托:指向方法的指针,类似于C的函数指针 事件:是一个可以存放0个或多个方法指针的数据结构 ...
- EventEmitter：nodeJs事件触发机制
Node.js 所有的异步 I/O 操作在完成时都会发送一个事件到事件队列 Node.js 里面的许多对象都会分发事件:一个 net.Server 对象会在每次有新连接时触发一个事件, 一个 fs.r ...
- [转载] 理解 epoll 的事件触发机制
原文: http://weibo.com/p/1001603862394207076573?sudaref=weibo.com epoll的I/O事件触发方式有两种模式:ET(Edge Trigger ...
- WinForm中的事件触发机制学习
在一个Form窗体中拖个按钮,双击后系统自动生成代码: private void button1_Click(object sender, EventArgs e) { } 同时在窗体的Initial ...
- 当页面加载完成时，JQ触发添加页面的元素的事件触发不了。。
有下代码可知: <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default. ...
- Yii中事件触发机制
控制器初始化中添加事件处理方法,在需要触发的地方直接触发 public function init() { parent::init(); // TODO: Change the autogenera ...
- python 模拟事件触发机制
EventManager.py # -*- encoding: UTF-8 -*- # 系统模块 from queue import Queue, Empty from threading impor ...
- JQuery的方便之处——宽高设置、坐标值和滚动条+事件绑定机制
1.元素的宽高 可以通过css来进行设置,例如:$("元素").css({"宽度":"值","高度":"值&q ...
随机推荐
- Oracle EBS CST 成本请求报错
(文档 ID 430533.1) When running CMCPAW, Periodic Actual Cost Worker, an error is received in the logf ...
- 超经典sql练习题，在teradata上实现
题目来源:https://blog.csdn.net/flycat296/article/details/63681089 teradata实现: drop table student; create ...
- C#-老生常谈的 值类型与引用类型
特殊的String 说起值类型和引用类型,大家都知道这么个事,很多时候我们会拿String做值类型来做比较,但实际上String虽然是值类型,却表现的有点特别 String示例 看下面的一个例子: 话 ...
- abp框架里使用Redis
首先引用 nuget Abp.RedisCache 在 appsettings.json加上Redis服务器配置 "RedisCache": { "ConnectionS ...
- Python中日期时间案例演示
案例:准备10个人姓名,然后为这10个人随机生成生日[都是90后] 1.统计出那些人是夏季[6月-8月]出生的. 2.最大的比最小的大多少天 3.谁的生日最早,谁的生日最晚 备注:春季[3-5]夏季[ ...
- jQuery 效果函数，jquery文档操作，jQuery属性操作方法，jQuerycss操作函数，jQuery参考手册-事件，jQuery选择器
jQuery 效果函数 方法 描述 animate() 对被选元素应用“自定义”的动画 clearQueue() 对被选元素移除所有排队的函数(仍未运行的) delay() 对被选元素的所有排队函数( ...
- Mac上Hive环境搭建
本文介绍在Mac上搭建Hive环境. 建议首先配置好Hadoop,搭建与配置可以参考我之前的博文Mac Hadoop的安装与配置. 当然你也可以选择使用Docker搭建环境,本文不作介绍. 安装 对于 ...
- InnerClass annotations are missing corresponding EnclosingMember annotations. Such InnerClas...
如果 你的项目中使用了注解插件 比如butterknife 升级3.1之后打包编译 出现以下错误提示 InnerClass annotations are missing correspondi ...
- Ethereum HD Ｗallet（虚拟货币钱包）-BIP32、BIP39、BIP44
1.使用HD钱包的好处(链接:https://www.jianshu.com/p/53405db83c16) 备份更容易 传统钱包的问题是一个钱包可能存有一堆密钥地址,每个地址都有一些比特币.这样备份 ...
- App常见产品问题及预防方法
01界面适配 a:手机分辨率为1920x7080的高分辨率手机,在调整手机字体大小时,会导致页面显示出现变形: b:因用户设置的特殊字体导致列表的字母条不显示: c:某些banner 图片在部分机型只 ...