问题背景

最近在开发一个低代码平台，根据hiprint写一个满足自己业务要求的低代码平台，根据设计模板预览或打印出来。 由于画布上的元素需要实现对齐所以就有了类似办公软件里面的对齐功能

问题出现在鼠标点击对齐之后，通过按键盘方向键微调移动选中的多个元素时，元素开始乱七八糟乱动，最终挤在一团。

问题排查

1.线排查了对齐方法的进入入口，发现这个对齐方法只有页面通过在* a-radio-button*上绑定了@click，其他地方没有这个方法的入口了。但是确实键盘操作能够进入此方法。

2.百思不得其解的时候进ant-design官网看这个组件，锁定了radio，发现这个组件在获得焦点的时候可以通过键盘控制，键盘方向键的动作会锁定不同选项。

键盘方向键的动作引发了click事件

3.同时去element官网看这个组件，发现这个组件同样在获得焦点的时候可以通过键盘控制。

当el-radio-group上绑定了@change方法后，同样的键盘操作也会触发。

解决办法和结论

找到原因了，后面发现时根据焦点顺序的执行了一遍每个对齐方法，解决方法也简单，由于引用的jquery开发，所以我直接转移焦点，让焦点不在radio这个组件上就可以避免这个问题再次出现了 $('.design').focus()//转移到画板

a-radio由于展示了click事件，所以排查问题的时候一直在纠结click方法，在纠结我究竟哪里触发了点击事件。 el-radio的优点在于它隐藏了el-radio-button的click方法，所以不会往点击方法那边去排查问题，而是会往change方面去思考，我的动作是不是由于修改了选中的值引起的。