запретить срабатывание события дочернего элемента, при перемещении родительского

[Danil]

Здравствуйте.

Есть некий блок, с кнопками:

<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();
   }
});

но мне кажется это не очень правильно, хотя и работает.

Как можно это сделать проще?

[vpisklov]

как я понимаю, вы используете 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()
})
}

});

[Danil]

vpisklov так не получается из за очередности срабатывания событий, сначала вызывается событие cssch_box.start, потом cssch_box.stop, и только потом buttons.click


я думаю тут нужно как то запретить дальнейшее выполнение событий на определенном этапе, но как фиг его знает

[DjDiablo]

Jquery вызывает события для элементов в порядке их вложенности друг в друга. Покрайней мере у меня сложилось такое впечатление.

click срабатывает после отпускания кнопки мыши, тогда же срабатывает и stop. Но так как stop к внешнему обьекту относится, то stop срабатывает раньше чем click.

Попробуй вместо click использовать mouseup - это событие должно после start обрабатываться, а следовательно его можно будет отключить, через unbind к примеру.

[Danil]

DjDiablo Спасибо!

Как то я крутился вокруг да около, а так и не пришел к этому. Действительно так работает:

$('.button').bind({
   mouseup: somefunc
});

$('#cssch_box').draggable({
   containment: 'window',
   start: function(){
      $('.button').unbind('mouseup');
   },
   stop: function() {
      $('.button').bind({
         mouseup: somefunc
      });
   }
});