Javascript-форум (https://javascript.ru/forum/)
-   Events/DOM/Window (https://javascript.ru/forum/events/)
-   -   mouseup не работает при клике на скролбар (https://javascript.ru/forum/events/14253-mouseup-ne-rabotaet-pri-klike-na-skrolbar.html)

kostysh 08.01.2011 07:41

mouseup не работает при клике на скролбар
 
Всем привет, помогите пожалуйста решить проблемку.

На странице есть элемент div у которого стиль overflow:auto
Естественно, когда содержимое этого слоя превышает размеры слоя - то появляются скролы (справа, снизу).

у меня есть скрипт, который использует два события - onmousedown и onmouseup. Так вот, если пользователь кликает мышкой внутри слоя - оба события срабатывают, но если он кликает на скролбар, то срабатывает только событие onmousedown, а onmouseup не срабатывает.

все это воспроизводится в ГуглХроме, в других не пробовал, поскольку скрипт пишется только для Хрома.

в JQuery код такой, если кто попробовать хочет:

<div id="test">blablabla</div>

----------------

$('#test').mousedown(function() {
   console.log('MouseDown Fired!');
   $(this).mouseup(function() {
      console.log('MouseUp Fired!');
   });
});


-----

В инете встречал достаточно много подобных вопросов, но ответа пока не нашел. Также нашел запись в баглисте файрфокса, там пользователи пишут, что тоже сталкиваются с подобной проблемой. Но и там не ни костыля ни фикса.

Может кто-то знает как определить момент когда пользователь кликает на скролбаре? как различить mousedown внутри слоя от mousedown на скролах?

Matre 08.01.2011 08:21

клик на скролле нельзя зафиксировать некак
разве что событие onscroll если пользователь прокручивает скрол
так же можно использовать такие плагины как jscrollpane если есть вомзожнгость,на них можно поймать mousedown/mouseup

kostysh 08.01.2011 21:31

есть решение
 
Цитата:

Сообщение от Matre (Сообщение 86824)
клик на скролле нельзя зафиксировать некак
разве что событие onscroll если пользователь прокручивает скрол
так же можно использовать такие плагины как jscrollpane если есть вомзожнгость,на них можно поймать mousedown/mouseup

в общем, свою проблему я решил. способ определить момент клика на скролбар есть. Решается элегантно, хотя и похоже на костыль :)))

суть решения такова: у нас всегда есть возможность в динамике определить - появились скролы или нет - это мы можем узнать по разнице таких переменных как offsetHeight и clientHeight (по высоте) и
offsetWidth и clientWidth (по ширине). По сути разница будет равняться ширине полоски скрола. То есть даже если вы через стили измените ширину этих полосок - то метод сработает. Далее мы из события берем координаты мышки и узнаем находится ли она над скролом или нет.
В моем случае этого хватило. Я узнаю где мышка и если она над скролом, то я игнорирую событие... то есть теперь мне вообще не нужно ждать mouseup, ведь я знаю что его не будет :)

Код примера на JQuery такой:

$('#test').mousedown(function() {
   var rightscroll = this.offsetWidth-this.clientWidth;
   var bottomscroll = this.offsetHeight-this.clientHeight;
   var mouseX = event.pageX;
   var mouseY = event.pageY;

   if (rightscroll > 0
      && (mouseX >= this.clientWidth && mouseX <= this.offsetWidth)) {
        return true;//if mousedown on right scroll bar
   }

   if (bottomscroll > 0
      && (mouseY >= this.clientHeight && mouseY <= this.offsetHeight)) {
        return true;//if mousedown on bottom scroll bar
   }
   console.log('MouseDown Fired!');
   $(this).mouseup(function() {
      console.log('MouseUp Fired!');
   });

});


Часовой пояс GMT +3, время: 18:14.