vue中判断鼠标是否超过了容器X轴一半

1.

  <template>
    <div res="box" @click="action($event,123)"></div>
  </template>

2.

action(e,index){
  let boxWidth = this.$refs.box.clientWidth                         // box的宽度    
  let screenLeft = e.pageX                                          // 鼠标距离屏幕左侧的距离
  let boxLeft = this.$refs.box.getBoundingClientRect().left         // box距离屏幕左侧的距离
  let overHalf = (screenLeft - boxLeft)  > boxWidth / 2             // 鼠标位置是否超过了容器的一半
}