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

时间 2019-11-25

标签 canvas 获取浏览器坐标 vue 项目 demo 其他同样栏目浏览器繁體版

原文原文链接

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

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之外都是可用的，canvas

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

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

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

注意：使用layerX和layerY的时候，必定要将触发的dom设置定位，要否则，坐标是会跑偏的firefox