angularJS - getting x & y positions from mouseclick in div

Question

I made a function that should add an item on the position I clicked inside a div. Now the problem with this function is, every time I click, it takes the x & y position of the document, not the x & y position inside the div. So what I actually want, is that the top-left corner of my div should give x=0 & y=0, but I don't know if this is possible? And I guess there is another way to do this..

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

Answer 1

You need to change event.x to event.offsetX and event.y to event.offsetY

You didn't add the template definition but I'll add it just in case:

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

Answer 2

In html file, use:

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

And in the function in the ts file::

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