JQuery e.offsetX jumping values issue

Question

I'm working on a video progress bar which should have the ability of seeking (drag or click to seek) and the issue I'm having is rather confusing and is related to the drag functionality of the progress bar.

While dragging the progress ticker will move from the position of the mouse to the start of the progress bar instead of maintaining it's proper position close to the mouse location.

A demo of the issue is available here.

note: don't worry about the ticker not maintaining it's value after you release the mouse, my issue is related to the ticker going back to 0% while the user drags his mouse over the progress bar.

Answer 1

Solution

Without changing the markup, check whether the triggerer (does that word exists?) is #progress (or not #progress-bar) :

$(document).on('mousemove', '#progress', function(e) {
    if (progressTicking && (e.target.id === 'progress')) {
        ...

Here's a working demo of it.

There's still some buggy behavior though, like the cursor's difference when hovering between #progress and #progress-ticker, and it's a bit lagging.

Explanation

Your event mousemove is triggered whenever the mouse moves in #progress and its child.

It's known as Event capturing (diagram from QuirksMode.org) :

               | |
---------------| |-----------------
| element1     | |                |
|   -----------| |-----------     |
|   |element2  \ /          |     |
|   -------------------------     |
|        Event CAPTURING          |
-----------------------------------

As a result, your function is called twice per movement (almost, unless you move really slowly), once by #progress, once by #progress-ticker.

So, e's current target is, half of time, not the element you'd expect, and you're getting the wrong offsetX = offset of the mouse inside #progress-ticker.

Advice

You could have a look at browser's implementations of sliders, like in webkit, using -webkit-appearance: slider-horizontal (here's a list of values for webkit)