click事件细节

这是前一个月被反馈的问题，当时没有时间研究，今天稍有时间研究汇总下

一个小问题

click事件是鼠标点击某个元素的时候触发的吗？
这么问还不够细……
是鼠标点下触发的吗？
是鼠标松开时触发的？
还是鼠标一次按下+松开再触发。

这个问题很好回答，相信很多人有这样一种检验：一些二逼的产品经理把一些点击的交互放在非常不寻常的位置，这导致我们经常点击到错误的区域——好的，我们细化这个过程：

-->我们需要执行某个无脑操作，鼠标在我们直觉认为的地方左键按下(并没有松开)
-->然后大脑忽然参与了，“二逼，这个地方点击并不能达到你的期望，并且会跳到一个操作时间很长的页面，以公司这破网速，你再回到此页面需要250秒！”
-->然后我们的右手（此处忽略左撇子的感受！）拖动鼠标到一个无关的地方，释放按下的左键，“好险，又避开了产品经理的陷阱！”

一次连贯的click事件就被我们摧毁了。

和别的事件结合会发生什么事

就像我们打断鼠标的点击事件一样，在同一元素上触发click事件和一些别的事件，会造成意外的情况。

因为click包含mousedown和mouseup,那么我们就要特别注意那些mousedown时触发的事件：mousedown,focus,focusin。

假如这些mousedown时就会触发的事件是把鼠标移到别的位置，例如弹出一个遮挡层——鼠标与原来的元素之间的联系就断开了，就算鼠标的坐标没有发生变化，但是此时再松开鼠标——还有卵用！你只是在遮挡上来了一发mouseup！

细节之处

模拟select元素遇到的问题

方案一

我时常看到一些人嫌select元素不好用，要自己模拟一个select。

代码会这样写

/**
 * 模拟一个下拉列表
 */
function DropdownList(){
	var container = $("<div class='select'></div>");
	var curitem = $("<input readonly='readonly' class='curitem'>");
	var list = $("<ul style='display:none'><li>选项1</li><li>选项2</li></ul>");

	//事件
	curitem
	.focus(function(){
		list.css({
			"display":"block"
		})
	})
	.blur(function(){
		list.css({
			"display":"none"
		})
	})
	list.find("li").click(function(e){
		var value = $(e.target).html();
		curitem.val(value);
	})

	container.append(curitem);
	container.append(list);

	return container;
}

他们使用一个input来呈现已选中的项的值，用一个ul存放下拉列表的值，通过input的焦点事件来显隐ul。给li元素绑定click事件来选中。
然而：click事件并没有什么卵用！

因为我们click一个li的时候，放慢动作：

-->mousedown到了li上 --> input 失去焦点,blur了 --> ul隐藏了 -->此时™释放了mouseup

你的click被沉默了！

解决办法：只要把选择事件从click换成 mousedown即可。

方案二

一些同学在上面一步就垮掉了，愤怒地说道：“尼玛的，傻逼设计的js，傻逼设计的dom，本屌的思路如此行云流水，竟然会出现此路不通！”

他们会执行方案二：

/**
 * 模拟一个下拉列表
 * 使用一个div和ul
 */
function DropdownList2(){
	var container = $("<div class='select'></div>");
	//这里不再用input元素，而是一个div元素，他们不再依赖focus和blur机制
	var curitem = $("<div class='curitem'></div>");
	curitem.css({
		"border":"1px solid #ddd",
		"height":"30px",
		"width":"100px"
	})
	var list = $("<ul style='display:none'><li>选项1</li><li>选项2</li></ul>");

	//事件
	curitem
	.click(function(){
		list.css({
			"display":"block"
		})
	})
	
	list.find("li").click(function(e){
		var value = $(e.target).html();
		curitem.html(value);
		list.css({
			"display":"none"
		})
	})

	container.append(curitem);
	container.append(list);
	return container;
}

然而坑爹的是，当ul显示出来之后，点击页面的其他地方，ul隐藏不了。于是……
在body上绑定了一个click事件，click之后隐藏ul……

有一些模拟化编程基础的同学是忍受不了这种事情的。

我的解决方法是使用focuseout,它有一些兼容性问题我这里不讨论：

focusout和blur的概念是一样的，但它是冒泡的。有人说，这里是个div元素没有focus和blur事件，你冒个卵子，我只能说too young too simple！

需要背景知识的去看这篇文章，很棒的，说说focus /focusin /focusout /blur 事件

我们直奔主题了：
我们将上面的代码改造成如下

/**
 * 模拟一个下拉列表
 * 使用一个div和ul
 */
function DropdownList2(){
	var container = $("<div class='select' tabindex='0'></div>");//这里使用一个tabindex是为了让div在非ie环境下具有fouseout事件
	//这里不再用input元素，而是一个div元素，他们不再依赖focus和blur机制
	var curitem = $("<div class='curitem'></div>");
	curitem.css({
		"border":"1px solid #ddd",
		"height":"30px",
		"width":"100px"
	})
	var list = $("<ul style='display:none;200px;border:1px solid #ddd;'><li>选项1</li><li>选项2</li></ul>");

	//事件
	curitem
	.click(function(){
		list.css({
			"display":"block"
		})
	})
	
	list.find("li").click(function(e){
		var value = $(e.target).html();
		curitem.html(value);
		list.css({
			"display":"none"
		})
	})
	container.focusout(function(e){
		console.log("container focusout")
		list.css({
			"display":"none"
		})
	})

	container.append(curitem);
	container.append(list);
	return container;
}

上面的代码在chrome，firfox下没有问题，但是在ie下是有问题的：li的click之后触发的首先是container的focusout事件，然后list直接被隐藏了,click又被沉默了！——因为ie下li和div天然就可触发focuseout事件，所以我们放下慢动作：

ie中（别的浏览器我就不说了）：

-->首先你click了用来显示选中项的curitem,然后ul显示出来了——此时焦点在curitem上
-->然后你选中了一项（mousedown）：焦点到了ul中的此项上-->curitem上触发了focusout事件,冒泡到container上-->container.focusout隐藏了ul-->你在ul之外释放mouseup

这个现象说明了一个元素的focusout事件包括冒泡上去的focusout事件，执行完了，才会执行这个元素上的click事件！

想一想，为什么要这么设计？

为什么一个先触发的事件，需要完成其整个冒泡之后，再触发后一个事件？