canvas获取浏览器坐标（vue项目demo，其余是一样的）

Posted 2021-01-12 jiangze-blog

引言：在使用canvas获取坐标的时候，不同浏览器处理是不同的

getPosition (ev) {
      let x, y
      if (ev.layerX || ev.layerX === 0) {
        x = ev.layerX
        y = ev.layerY
      } else if (ev.offsetX || ev.offsetX === 0) {
        x = ev.offsetX
        y = ev.offsetY
      }
      return {x: x, y: y}
 }

以上代码是获取点击坐标的，除了IE6，7，8以外都是可用的，

火狐浏览器用layerX和layerY来替代offsetX和offsetY

layerX/Y获取到的是触发点相对被触发dom左上角的距离，数值与offsetX/Y相同，这个变量就是firefox用来替代offsetX/Y的，基准点为边框左上角，但是有个条件就是，被触发的dom需要设置为position:relative或者position:absolute，否则会返回相对html文档区域左上角的距离

兼容性：IE6/7/8不支持，opera不支持，IE9/10和Chrome、Safari均支持

注意：使用layerX和layerY的时候，一定要将触发的dom设置定位，要不然，坐标是会跑偏的