Published on
371

Antd ColorPicker 颜色选择器在新版本浏览器拖动导致选中问题

Authors
  • avatar
    Name
    小辉辉
    Twitter

前言

现在浏览器升级速度很快,每次升级都会加入很多新功能比如新的API、调试功能升级等,作为一个前端开发,每天都要用到浏览器调试自然就很喜欢升级,但是也不是每次升级都是好事,有时候就出现过升级后导致原有功能不兼容的问题。

这次就是这样一个情况,有测试反馈我们的颜色组件,在选择颜色时会触发外部内容的选中功能,这个问题在旧的浏览器版本上不存在(具体哪个版本坏了也没有确认过),现在要做的就是怎么解决这个问题,因为让用户不升级浏览器是不切合实际的。

解决思路

讲讲我们的处理思路,选中可以理解为一个事件,自然而然是在某个事件后触发的,那我们是不是可以监听触发前的事件,使用event.preventDefault()方法来阻断默认事件就行了,当然还可以直接拦截选中开始事件也就是(selectstart),在内也用event.preventDefault()方法来阻断默认事件就行了。

上述两个代码,最简单的肯定是方法一了,因为不需要额外新增事件监听和后续的。

最后找到colorPicker组件中mousemouse事件,在其中新增默认阻止事件,选中问题解决。