AngularJS - 从鼠标点击的div中获取x和y位置

Question

我写了一个函数，应该可以在我点击的位置添加一个项目到 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,
        })
}

- M. Winterinho

Answer 1

你需要将event.x更改为event.offsetX，并将event.y更改为event.offsetY

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

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

- Liviu T.

---

这正是我在寻找的！我知道它会像那样容易 :D & 是的，我已经添加了模板定义，但我确信一切都没问题.. 非常感谢啊伙计！ - mwinter

注意，Firefox浏览器没有offsetX属性。在Firefox中请使用layerX属性。（参考链接：https://dev59.com/El_Va4cB1Zd3GeqPSVMr） - Endy Tjahjono

Firefox现在有offsetX和offsetY，但它们似乎不正确。 - trysis

Answer 2

在 HTML 文件中，使用以下代码：

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

在 TypeScript 文件的函数中：

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

- Dudu Madeira

Answer 3

对于那些使用拖拽库并想要获取被拖拽元素位置的Angular用户：

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

并且在控制器中

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

 }

- Dr Manhattan