在我以前的概念里，触摸动作不过是鼠标动作在移动端的别名而已，并没有深究过两者的区别。直到前两天自己第一次接触移动端，发现还是有点区别：

触摸是个“面”而不是“点”

举个栗子：

可以看到，图中黄色层重叠在红色层之上，红层上有超链接、黄层没有，蓝圈大概能表示我一次触摸动作的影响范围。与鼠标事件相同的是，虽然影响范围是个“面”，但Touchstart和Touchend事件只发生一次，发生在处于上层的“B层”(即黄色层，见日志行1和3)，而且事件中封装了一个确定的触发点坐标。

但300毫秒后，click事件触发在了A层（下方红色层，日志行2），且触发点坐标和touch的不一样。

思考+推测

浏览器处理触摸的逻辑：在一次触摸到浏览器后，浏览器拿到的应该是一个“面”。对于每个事件，选取页面上的某个元素进行触发。这个选取的规则有三：

1. 元素在触摸“面”范围内
2. 元素能触发该事件
3. 在满足1和2的元素集中，选取位于最上层的元素

在上面的例子中，对于touch类事件，在位于最上层的黄层触发。但是，黄层因为普通div无法触发click事件，所以不满足第2条——导致位于下层却同样在“触摸面”内的红层，响应了click事件。

试了下，同样条件下，给黄层加了超链接，红层就不会再被触发点击。和预期相符。

这种情景下，不想红层触发click的话，在touch事件里调用preventDefault()就好。