angularjs获取当前鼠标的位置

在angularJS项目中，canvas画图经常会要求获取用户当前鼠标的坐标位置，而且因为不同浏览器获取数据的方式不同，避免每次都去写实现该功能的代码。 因此把该功能写成一个函数，以后直接调用就行了， 封装函数如下：

      // 获取当前dom元素
      function getCrossBrowserElement(mouseEvent){
        var result = {
          x: 0,
          y: 0,
          relativeX: 0,
          relativeY: 0,
          currentDomId: ""
        };

        if (!mouseEvent){
          mouseEvent = window.event;
        }

        if (mouseEvent.pageX || mouseEvent.pageY){
          result.x = mouseEvent.pageX;
          result.y = mouseEvent.pageY;
        }
        else if (mouseEvent.clientX || mouseEvent.clientY){
          result.x = mouseEvent.clientX + document.body.scrollLeft +
            document.documentElement.scrollLeft;
          result.y = mouseEvent.clientY + document.body.scrollTop +
            document.documentElement.scrollTop;
        }

        result.relativeX = result.x;
        result.relativeY = result.y;

        if (mouseEvent.target){
          var offEl = mouseEvent.target;
          var offX = 0;
          var offY = 0;
          if (typeof(offEl.offsetParent) != "undefined"){
            while (offEl){
              offX += offEl.offsetLeft;
              offY += offEl.offsetTop;
              offEl = offEl.offsetParent;
            }
          }
          else{
            offX = offEl.x;
            offY = offEl.y;
          }

          result.relativeX -= offX;
          result.relativeY -= offY;
        }
        result.currentDomId = mouseEvent.target.id;

        return result;
      }

使用示例：

<div id="canvas-container">
  <canvas id="canvas-content" ng-click="onCanvasClicked($event)">
    your browser not support canvas, please upgrade your browser.
  </canvas>
</div>

对应的js代码如下：

  $scope.onCanvasClicked = function(event){
    var position = getCrossBrowserElement(event);
  }

便能获取到鼠标在元素上的相对位置，以及在屏幕上的绝对位置。