背景:我们在做 H5 的混合 APP.现在做登录按钮,点击变色,如果手放开在登录按钮上,就执行下一步。如果手放开的位置不在登录按钮上,恢复原色,不执行任何操作。
我的做法:使用 touch 事件。给登录元素注册 touchstart touchend 事件,然后获取元素的位置和宽高(使用的 rem,动态宽高)。在 touchstart 事件中,变色。 在 touchend 事件中,我们获取鼠标点击的位置,然后判断位置是否在元素内(一系列的比较)。如果在就执行下一步,不在就恢复颜色,不执行任何操作。
我的问题:感觉这个方法有点笨,然后跟同事沟通过,他有说 touchend 事件不应该注册在登录按钮上面,应该注册懂到全局,因为我们手会在其它地方释放的话,那 touchend 注册的元素就不准确。可以使用命中 target 方法来做,如果 touchstart 和 touchend 的 target 都在登录按钮上面的话,我们就执行下一步。(大致上是这个意思)。但是后来我注册到 body 的时候,发现 touchstart 和 touchend 的 target 只能是一样的。
希望: 有没有更好的方法来实现这个功能。