0

I'm making custom controls for html5 video. My problem is occurring when I click on the seek bar. The x coordinates are far off. As I understand, I need to account for all the margins and padding down to root element, i.e. myElement<parentOfMyElement<parenOfparentOfMyElement ... and so on. Every one of them has its own styling with padding and margins and whatnot. How to achieve that without going through entire dom tree backwards?

zero

I tried: 

       if(e.target.id==="progress"){

            parent = e.target;
            let x = e.pageX - parent.offsetLeft;
            console.log(x);

        }

        if(e.target.parentNode.id==="progress"){

            parent = e.target.parentNode;
            let x = e.pageX - parent.offsetLeft;
            console.log(x);

        }

and other variations. I basically need that when I click on the parent element, get x coord in that element, starting with zero when I click the far left, where the arrow on the image points.

PS: If it's fixed value that's being added up to x it wouldn't be a problem, but since resolution gets changed(resize, or in mobile rotate), x coord isn't fixed at any given time even when clicking at exact same spot due to previously mentioned.

Edit as per request:

            <div id="progress" onClick={this.trackProgress} className="progress text-center">
                <div id="progress-bar-num" className="progress-bar-num">{Math.round(this.state.width.toFixed(2))+"%"}</div>
                <div id="progress-bar" onClick={this.trackProgress} className="progress-bar bg-success" style={{width: Math.round(this.state.width.toFixed(2))+"%"}}></div>
            </div>

Don't let my markup confuse you, it is done in React. Effect would be the same if it's done in vanilla js.

Veljko Stefanovic
  • 481
  • 6
  • 25
  • Possible duplicate of [javascript get x and y coordinates on mouse click](https://stackoverflow.com/questions/23744605/javascript-get-x-and-y-coordinates-on-mouse-click) – Heretic Monkey Sep 30 '19 at 19:40
  • @Heretic Monkey I know how to get coords. Getting isn't hard. Calculating coord inside a parent without going through entire dom tree and testing margins/padding for every element is(tiresome). – Veljko Stefanovic Sep 30 '19 at 19:45
  • Answers on that question show how to get the page-relative coordinate without calculation... – Heretic Monkey Sep 30 '19 at 19:46
  • @HereticMonkey I think the OP want to get coords relative to the seekbar, not the page – FZs Sep 30 '19 at 19:48
  • @FZs If that's the case, why would they need to go "through entire dom tree backwards"? Seems like the question is unclear if it's not a duplicate... – Heretic Monkey Sep 30 '19 at 19:52
  • @Heretic Monkey since neither `.pageX` nor `.clientX` take into consideration `padding/margins/border` of every parent and superparent... of said element when calculating click in it. – Veljko Stefanovic Sep 30 '19 at 19:55
  • But why would you use `pageX` or `clientX` if you only care about the `offsetX`? Why have the click event bound on the parent if you want to know the position of the mouse when clicking in the child? – Heretic Monkey Sep 30 '19 at 20:01

1 Answers1

1

Your problem is that you're handling the event in a parent of the status bar element, so .offsetX is relative to the x position of parent and not the status bar.

Put the event handler on the status bar element itself and the .offsetX property of the event will work as you expect.

randomusername
  • 7,927
  • 23
  • 50
  • I got that function at both elements. Both parent and child element. See edit in a minute. – Veljko Stefanovic Sep 30 '19 at 19:46
  • Not right answer, but it pointed me at right answer. It is `e.nativeEvent.offsetX`. Since it's React and all ... At https://stackoverflow.com/questions/31519758/reacts-mouseevent-doesnt-have-offsetx-offsety Accepted your for pointing to right direction. Upped following for saying it's different that vanilla js. – Veljko Stefanovic Sep 30 '19 at 20:13