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 на скролах? |
клик на скролле нельзя зафиксировать некак
разве что событие 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, время: 16:44. |