javascript - 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,
        })
}

Answer 1

你需要改变event.xtoevent.offsetX和event.ytoevent.offsetY

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

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

Answer 2

在 html 文件中，使用：

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

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

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

Answer 3

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

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

并在控制器中

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

 }