refactor context menu position calculation with pageX and pageY

Author: LucienLee

src/components/DgTable.vue

@@ -35,7 +35,7 @@ import { TweenMax, Linear } from 'gsap'
 import { records } from '../data.json'
 import settings from '../tableSettings'
 import { toCurrency, toMMMMYYYY, capitalize, toGMapQuery, toUpperMagnitude } from 'utils/filters'
-import { offsets } from 'utils/mouse'
+import { normPagePosInEvent } from 'utils/mouse'
 import DgMenu from 'components/DgMenu'
 import DgCellMenu from 'components/DgCellMenu'
 import DgCellDetail from 'components/DgCellDetail'
@@ -213,9 +213,12 @@ export default {
       this.expandCol(attribute, event)
     },
     openMenu (event) {
-      const {x, y} = offsets(event)
-      this.menuPos.x = x + event.target.offsetLeft
-      this.menuPos.y = y + event.target.offsetTop
+      const rect = this.$el.getBoundingClientRect()
+      const OFFSET = 1 // show menu with 1px offset to mouse
+      event = normPagePosInEvent(event)
+
+      this.menuPos.x = event.pageX - rect.left + OFFSET
+      this.menuPos.y = event.pageY - rect.top + OFFSET
       this.clearFocusCell()
       this.closeFilterMenu()
       this.showMenu = true

src/utils/mouse.js

@@ -1,17 +1,15 @@
-function offsets (e) {
-  e = e || window.event
+/* Mouse position calc */
 
-  const target = e.target || e.srcElement
-  const style = target.currentStyle || window.getComputedStyle(target, null)
-  const borderLeftWidth = parseInt(style['borderLeftWidth'], 10)
-  const borderTopWidth = parseInt(style['borderTopWidth'], 10)
-  const rect = target.getBoundingClientRect()
-  const offsetX = e.clientX - borderLeftWidth - rect.left
-  const offsetY = e.clientY - borderTopWidth - rect.top
+// normalize pageX and pageY in mouse event
+function normPagePosInEvent (e) {
+  e = e || window.event
 
-  return {
-    x: offsetX,
-    y: offsetY
+  if (e.pageX === undefined) {
+    e.pageX = e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft
+    e.pageY = e.clientY + document.body.scrollTop + document.documentElement.scrollTop
   }
+
+  return e
 }
-export {offsets}
+
+export { normPagePosInEvent }