запретить срабатывание события дочернего элемента, при перемещении родительского
Здравствуйте.
Есть некий блок, с кнопками: <div id="cssch_box"> <div id="box_menu"> <div class="button"">position</div> <div class="button">fields</div> <div class="button">background</div> <div class="button">text</div> <div class="close">close</div> </div> <div id="box_content"> какие-то параметры </div> </div> мне нужно, что бы пользователь мог свободно перемещать его в пределах страницы, я пишу: $('#cssch_box').draggable({containment: 'parent'}); все работает, только одно "но", если я "подцепляю" и "тащу" контейнер за кнопку, происходит срабатывание события на этой кнопке, чего мне не надо иными словами, мне нужно что-бы я мог перетаскивать этот блок, кликая на любую его часть, но что-бы при этом не происходило срабатывания какого-либо дочернего элемента, а событие доч. элементов происходило только в том случае, когда перемещение отсутствует можно конечно каждому дочернему элементу, цеплять такую штуку: var coords = $('#cssch_box').offset(); $('.button').bind({ mouseup: function(){ //проверка на изменения координат блока if($('#cssch_box').offset().top == coords.top && $('#cssch_box').offset().left == coords.left){ //собственная ф-я элемента } coords = $('#cssch_box').offset(); } }); но мне кажется это не очень правильно, хотя и работает. Как можно это сделать проще? |
как я понимаю, вы используете jQuery UI... у draggable элементов есть события start и stop. как вариант, могу предложить делать unbind события кнопок, а при остановке опять bind... т.е как-то так
function clickMe(){ alert('click') } var buttons = $('div.button') $(buttons).bind('click', function(){ clickMe() }) $('#cssch_box').draggable({containment: 'parent', start : function(){ $(buttons).unbind('click') }, stop: function(){ $(buttons).bind('click', function(){ clickMe() }) } }); |
vpisklov так не получается из за очередности срабатывания событий, сначала вызывается событие cssch_box.start, потом cssch_box.stop, и только потом buttons.click
я думаю тут нужно как то запретить дальнейшее выполнение событий на определенном этапе, но как фиг его знает |
Jquery вызывает события для элементов в порядке их вложенности друг в друга. Покрайней мере у меня сложилось такое впечатление.
click срабатывает после отпускания кнопки мыши, тогда же срабатывает и stop. Но так как stop к внешнему обьекту относится, то stop срабатывает раньше чем click. Попробуй вместо click использовать mouseup - это событие должно после start обрабатываться, а следовательно его можно будет отключить, через unbind к примеру. |
DjDiablo Спасибо!
Как то я крутился вокруг да около, а так и не пришел к этому. Действительно так работает: $('.button').bind({ mouseup: somefunc }); $('#cssch_box').draggable({ containment: 'window', start: function(){ $('.button').unbind('mouseup'); }, stop: function() { $('.button').bind({ mouseup: somefunc }); } }); |
Часовой пояс GMT +3, время: 16:29. |