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

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

AngularJs 利用百度地图API 定位当前位置 获取地址信息

利用angular+百度地图API实现定位获取当前地址信息
  • pandongzi_2017
  • pandongzi_2017
  • 2017年01月18日 14:50
  • 1764

AngularJS 中常用鼠标操作

AngularJS 中 常用鼠标的操作 (ng-mouseenter 等操作)主要用于网站开发, 鼠标所出发的事件, 本文主要介绍两个ng-mouseenter 与 ng-mouseleave 操作,...
  • zhangzhipengzhangzhi
  • zhangzhipengzhangzhi
  • 2016年12月17日 21:46
  • 1720

js实时获取鼠标所在坐标

js实时获取鼠标所在的位置。
  • viciousDear
  • viciousDear
  • 2016年06月13日 10:30
  • 8872

js、jq获取当前鼠标位置

使用jQuery获取 javascript获得鼠标位置
  • never_tears
  • never_tears
  • 2017年04月13日 23:03
  • 2112

js获取鼠标点击位置坐标

在上一篇:js鼠标事件总结中,有提到鼠标事件的主要作用和目的,本意是为了解释鼠标事件为什么要写兼容处理。而本篇主要是总结当鼠标点击窗口时,如何获取它的坐标及其应用。      1.获取鼠标点击的...
  • lu_0216
  • lu_0216
  • 2016年12月10日 17:14
  • 2497

javascript获取鼠标当前位置坐标并显示

  • 2015年06月12日 09:24
  • 758B
  • 下载

获取鼠标实时位置坐标

//获取鼠标实时坐标 function mousePosition(ev){ ev = ev || window.event; if(ev.pageX || ev.pageY){ ...
  • Inuyasha1121
  • Inuyasha1121
  • 2015年01月19日 16:17
  • 6539

jquery悬浮窗,根据鼠标位置显示

hover一个位置就在位置右侧显示悬浮窗,代码如下: JS: $(function () { //hover某处显示悬浮框 $("#createtable").mouseover(...
  • Inuyasha1121
  • Inuyasha1121
  • 2015年01月19日 16:59
  • 9823

angular 鼠标移入移开元素显示或隐藏

主要使用了ng-mouseenter与 ng-mouseleave 表示鼠标的移入移出
  • chenhua4088
  • chenhua4088
  • 2016年05月11日 14:56
  • 6871

AngularJS input自动聚焦

当我们在使用ionic进行开发的时候,使用angularjs中的ng-focus指令并没有效果。 比如当我们在需要点击某个按钮然后弹出输入框,并且需要自动聚焦到这个输入框的时候。如果使用angular...
  • u010730897
  • u010730897
  • 2016年09月02日 09:52
  • 4976
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:angularjs获取当前鼠标的位置
举报原因:
原因补充:

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