Event Listeners

JavaScript
1

I have added an event listener to a progress bar. When I click on the bar I can get to a function. What I cannot figure out is how to find the horizontal location on the bar the click event occured. I wish to take this location to the target function so I can process it.

I would appreciate any pointers on this subject.

Thank you

2

the pageX property of the event will give you this.

3

Thank you for your reply. Yes I understand that. What I do not understand is how the position is captured so I can send it to the target function.

4 
addEventListener('click', myfunction, true);

myfunction(e) {
alert(e.pageX);
}
5

I think may be the brower has prevented the event

6

Take in note that pageX gives you an coordinate related to left edge of the page.
You may also want to convert it to the local coordinate (related to left edge of your progress bar).
You can use element.getBoundingClientRect().left for that.
Example:

getElementById('my-element').addEventListener('click', myfunction, true);

myfunction(e) {
    alert('Page X: ' + e.pageX);
    alert('Local X: ' + (e.pageX - this.getBoundingClientRect().left));
}

If you’ll not do that, your script can behave differently depending on the element position on the page (for example that position can change if user shrinks the browser window).

PS: i replied to Felgall’s post, but this info is for OP. I’m sure Felgall knows that already :smiley:

7

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.