公司项目中最近有个需要需要拖拽框选日期，也能单击选择，类似桌面选择文件这种，于是我 google + 自己改造终于实现了这个需求，但是在使用过程中有个问题一直存在，就是有时候单击无法选中日期。后来我打印 events 发现无法选择的时候，events 是拖拽时候显示的虚线框，而不是真正想点击的点击的元素。之后我就一直在网上找寻解决方法，无意中发现了一个冷门 CSS 属性：pointer-events: none。MDN对它的定义是：

说简单点就是不会触发元素的 onclick 事件了。

我使用了这个属性后，的确不会再打印出虚线框了，但是问题还是没解决，于是继续排查，最后发现是有的点击只是看起来是点击，其实是触发了拖动事件，而问题就出在拖动结束时的鼠标抬起 mouseup 事件与click 事件一起触发，从而导致出现了新的问题。

最后的解决方案是定义了一个变量，平时为 false，一但触发了 mousemove 事件，就把它设置为 true ，然后在 mouseup 事件结束时设置一个定时器，延时 200 毫秒，200毫秒后把这个变量设为 false ，因为 mouseup 之后马上会触发 click 事件，这个时间肯定是小于 200 毫秒的，所以在 点击事件的函数中再判断下这个变量是否为 true 就可以了，如果为 true 则直接 return 。

Demo