angularjs获取当前鼠标的位置

原创 2016年08月31日 10:28:27

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

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

相关文章推荐

JavaScript 获取鼠标及元素在页面上的位置

JavaScript获取鼠标的位置,大家会想到clientX/Y等属性,灵活的获取鼠标的位置信息,能够便于我们实现各种复杂的页面交互效果,到底还有哪些属性可以获取鼠标的位置信息?另外,还有哪些能快速获...

angularjs ng-click获取当前元素

在方法中传入$event,js中通过event.target获取当前元素。
  • qyshibb
  • qyshibb
  • 2017年06月05日 11:00
  • 1566

AngularJS中获取点击元素在页面中的位置

html页的代码: JS代码: $scope.toggle = function($event){ // 获取到当前点击元素在页面中的坐标 var off = $($even...

angular ng-click获取触发事件对象this

来源:http://hbiao68.iteye.com/blog/2286434 ng-click="shareGoods({{item.goods_id}},$event)" 传递...

AngularJS 中常用鼠标操作

AngularJS 中 常用鼠标的操作 (ng-mouseenter 等操作)主要用于网站开发, 鼠标所出发的事件, 本文主要介绍两个ng-mouseenter 与 ng-mouseleave 操作,...

获取鼠标实时位置坐标

//获取鼠标实时坐标 function mousePosition(ev){ ev = ev || window.event; if(ev.pageX || ev.pageY){ ...

angularjs框架的悬浮提示框实现

angularjs框架的悬浮提示框实现 第一步:需要添加js引用: 第二步:在JS中引用这个控件 有的可以这样写: reliers.push("angular-popups")...

ng-click得到当前元素,angular.element()用法

1 2 3 4 5 {{ page }} function TestCtrl($scope) { $scope.page = 1; ...
  • amohan
  • amohan
  • 2014年09月13日 09:40
  • 64697

AngularJS进阶(二十)HTML5实现获取地理位置信息并定位功能

HTML5实现获取地理位置信息并定位功能 注:请点击此处进行充电! 前言      这篇文章主要介绍了HTML5实现获取地理位置信息并定位功能,本文讲解了原生HTML5、百度地图、谷歌地图等三种获取理...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:angularjs获取当前鼠标的位置
举报原因:
原因补充:

(最多只允许输入30个字)