关闭

angularjs获取当前鼠标的位置

标签: htmlangularjscanvas
226人阅读 评论(0) 收藏 举报
分类:

在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);
  }

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

0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:20819次
    • 积分:387
    • 等级:
    • 排名:千里之外
    • 原创:16篇
    • 转载:2篇
    • 译文:1篇
    • 评论:5条
    最新评论