不显眼，却容易导致js碰撞事件失败的小细节？

div用translate移走后写JS碰撞事件时为什么还会发生碰撞？

开发工具与关键技术：VS JavaScript
作者：刘家龙
撰写时间：2019/3/31

下面这个问题是博主在写JS的碰撞事件时遇到的一个问题，下面和大家分享一下这个问题产生的原因和解决方案。
博主在测试JS的碰撞事件时发现，即使给了一个div动画属性transfrom:translate让div移动后，写了JS碰撞事件的div还是会跟这个div发生碰撞，即使表面上看赋予了动画移动属性的那个div已经移走。下面我给红色和蓝色的div写了发生碰撞时弹出提示框来展示一下，具体的情况图如下：

后来我就挺好奇是什么原因导致的，经过不断的调试之后我发现transfrom的translate属性其实是一种表象位移，虽然表面上进行的运动，其实在浏览器中的原位置是默认不变的，而碰撞事件却又是根据div的原位置进行判断，所以才出现了这种看着没有接触却发生了碰撞的情况。而解决的办法也很简单，只需要让div根据位置来进行位移来替换transfrom的translate属性就可以解决这个问题。

以上就是修改后的代码图和效果图，虽然是没什么技术含量的问题，但也算是一个小积累。