angularJS - getting x & y positions from mouseclick in div

javascript position angularjs
M. Winterinho picture M. Winterinho · Jan 18, 2013 · Viewed 45.2k times · Source

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

Liviu T. picture Liviu T. · Jan 18, 2013

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>

Related questions

Retrieve the position (X,Y) of an HTML element relative to the browser window

I want to know how to get the X and Y position of HTML elements such as img and div in JavaScript relative to the browser window.

Read More
Check if element is visible on screen

Possible Duplicate: jQuery - Check if element is visible after scroling I'm trying to determine if an element is visible on screen. In order to to this, I'm trying to find the element's vertical position using offsetTop, but the value …

Read More
Using jquery to get element's position relative to viewport

What's the proper way to get the position of an element on the page relative to the viewport (rather than the document). jQuery.offset function seemed promising: Get the current coordinates of the first element, or set the coordinates of …

Read More