Suwak, kilka elementow - JavaScript Problem

Question

Cześć,

Tworzę suwak w JS i napotkałem na mały problem.
http://codepen.io/anon/pen/JGbKor

Mam suwak, który po najechaniu wywołuje funkcję.
Funkcja polega na ustawieniu "postepu suwaka" za pomocą położenia myszy względem całego suwaka.
Wewnątrz suwaka mam jeszcze jeden element, który w dalszym etapie skryptu ma być po prostu buttonem do przesuwania i problem tkwi w tym, że ten button dziedziczy funkcje suwaka, przez co po najechaniu na niego to on wywołuje funkcje zamiast pierwotnie, cały suwak, co skutkuję złym ustawieniem się "postepu suwaka".

Problem teoretycznie wydaję się prosty do rozwiązania, jednak praktycznie nie mam pojęcia jak się z nim uporać.
Szukałem trochę po zagranicznych internetach i nie znalazłem rozwiązania, tak więc proszę Was o pomoc.

Answer 1

Udało się ten sam efekt uzyskać korzystając z e.clientX oraz getBoundingClientRect().left

Answer 2

Sprawdź co siedzi w e.target. Jeśli to nie ten sam element, co w zmiennej progressBar, zakończ działanie handlera.

Comments

Tylko to nie rozwiązuje mojego problemu.

Zerknij na odświeżony kod:
http://codepen.io/anon/pen/JGbKor

Postęp suwaka ma się zmieniać również gdy kursor znajduje się jeszcze na buttonie.