- Published on
- 约 371 字
Antd ColorPicker 颜色选择器在新版本浏览器拖动导致选中问题
- Authors
- Name
- 小辉辉
前言
现在浏览器升级速度很快,每次升级都会加入很多新功能比如新的API、调试功能升级等,作为一个前端开发,每天都要用到浏览器调试自然就很喜欢升级,但是也不是每次升级都是好事,有时候就出现过升级后导致原有功能不兼容的问题。
这次就是这样一个情况,有测试反馈我们的颜色组件,在选择颜色时会触发外部内容的选中功能,这个问题在旧的浏览器版本上不存在(具体哪个版本坏了也没有确认过),现在要做的就是怎么解决这个问题,因为让用户不升级浏览器是不切合实际的。
解决思路
讲讲我们的处理思路,选中可以理解为一个事件,自然而然是在某个事件后触发的,那我们是不是可以监听触发前的事件,使用event.preventDefault()方法来阻断默认事件就行了,当然还可以直接拦截选中开始事件也就是(selectstart),在内也用event.preventDefault()方法来阻断默认事件就行了。
上述两个代码,最简单的肯定是方法一了,因为不需要额外新增事件监听和后续的。
最后找到colorPicker组件中mousemouse事件,在其中新增默认阻止事件,选中问题解决。