公司项目中最近有个需要需要拖拽框选日期,也能单击选择,类似桌面选择文件这种,于是我 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