angularJS - 通过在 div 中单击鼠标获取 x 和 y 位置答案

【问题标题】：angularJS - getting x & y positions from mouseclick in divangularJS - 通过在 div 中单击鼠标获取 x 和 y 位置
【发布时间】：2019-08-07 06:57:15
【问题描述】：

我创建了一个函数，应该在我在 div 中单击的位置添加一个项目。现在这个函数的问题是，每次我点击时，它都会获取文档的 x & y 位置，而不是 div 内的 x & y 位置。所以我真正想要的是，我的 div 的左上角应该给 x=0 & y=0，但我不知道这是否可能？我想还有另一种方法可以做到这一点..

$scope.addOnClick = function(event) {
        $scope.items.push( {
            "label": "Click",
            "value": 100,
            "x": event.x-50,
            "y": event.y-50,
        })
}

【问题讨论】：

标签： javascript position angularjs

【解决方案1】：

您需要将event.x 更改为event.offsetX 和event.y 更改为event.offsetY

你没有添加模板定义，但我会添加它以防万一：

<div ng-click="addOnClick($event)"></div>

【讨论】：

这正是我想要的！我知道这会很简单：D & 是的，我已经添加了模板定义，但我确信那里一切正常。非常感谢队友！
小心 Firefox 没有 offsetX。 Use layerX for Firefox.
Firefox 现在有 offsetX 和 offsetY，但它们似乎不对。

【解决方案2】：

在 html 文件中，使用：

<div (click)="test($event)"></div>

并且在ts文件中的函数中::

function test(e){
 console.log(e.clientX);
 console.log(e.clientY);
}

【讨论】：

【解决方案3】：

对于那些使用拖动库并想要拖动元素的位置的 Angular 用户：

<div ng-click="OnDrag($event)"></div>

在控制器中

$scope.onDrag($event){
      console.log("X ->",$event.originalEvent.pageX,"Y ->",$event.originalEvent.pageY)

 }

【讨论】：