Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 07.10.2011, 12:58
Новичок на форуме
Отправить личное сообщение для Danil Посмотреть профиль Найти все сообщения от Danil
 
Регистрация: 30.04.2011
Сообщений: 6

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

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

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


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

Как можно это сделать проще?
Ответить с цитированием
  #2 (permalink)  
Старый 08.10.2011, 01:21
Интересующийся
Отправить личное сообщение для vpisklov Посмотреть профиль Найти все сообщения от vpisklov
 
Регистрация: 04.10.2010
Сообщений: 18

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

});
Ответить с цитированием
  #3 (permalink)  
Старый 08.10.2011, 11:34
Новичок на форуме
Отправить личное сообщение для Danil Посмотреть профиль Найти все сообщения от Danil
 
Регистрация: 30.04.2011
Сообщений: 6

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


я думаю тут нужно как то запретить дальнейшее выполнение событий на определенном этапе, но как фиг его знает
Ответить с цитированием
  #4 (permalink)  
Старый 08.10.2011, 23:54
Профессор
Отправить личное сообщение для DjDiablo Посмотреть профиль Найти все сообщения от DjDiablo
 
Регистрация: 04.02.2011
Сообщений: 1,815

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

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

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

Последний раз редактировалось DjDiablo, 09.10.2011 в 14:20.
Ответить с цитированием
  #5 (permalink)  
Старый 09.10.2011, 10:53
Новичок на форуме
Отправить личное сообщение для Danil Посмотреть профиль Найти все сообщения от Danil
 
Регистрация: 30.04.2011
Сообщений: 6

DjDiablo Спасибо!

Как то я крутился вокруг да около, а так и не пришел к этому. Действительно так работает:
$('.button').bind({
   mouseup: somefunc
});

$('#cssch_box').draggable({
   containment: 'window',
   start: function(){
      $('.button').unbind('mouseup');
   },
   stop: function() {
      $('.button').bind({
         mouseup: somefunc
      });
   }
});
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Изменение стиля родительского элемента при :hover дочернего lanzs Элементы интерфейса 2 16.10.2010 13:28
Обработка события элемента внутри создавшего его объекта pauluss Общие вопросы Javascript 10 10.09.2010 17:01
Срабатывание события при подведении к краю экрана Destrifer Общие вопросы Javascript 2 08.01.2009 15:12