Как запретить детям нажимать на родительский клик - PullRequest
Новая
       0

Как запретить детям нажимать на родительский клик

0 голосов
/ 13 декабря 2011

Я сделал следующую структуру кода и выполняю addClass item_box_popup и removeClass item_box при нажатии item_box div. 

<div class="item_box"> <!--This is the small div which when clicked changes to the item_box_popup div-->
  <div class="name">...</div>
  <div class="detail">...</div>
</div>

<div class="item_box_popup"> <!--This div expands to show the detail and the children in it has a click event-->
  <div class="name">...</div>
  <div class="detail">...</div>
</div>

В item_box div есть событие click, а не дочерние элементы. Работой является изменение div на item_box_pop div на addClass и removeClass при нажатии.

У item_box_popup нет события щелчка, но для детей определено событие щелчка. Мы использовали delegate для определения события нажатия для .item_box_popup .name и т. Д.

Проблема в том, что когда мы нажимаем item_box div, также запускается событие click, определенное для .item_box_popup .name. Это может произойти из-за изменения класса, определенного для клика .item_box.

Я не хочу, чтобы событие click вызывало детей при нажатии .item_box. Я попытался undelegate прекратить запуск клика на дочерних элементах item_box и просто сделать класс изменений, определенный для него, но это не работает.

Событие клика для .item_box

$('.slide > div').bind('click',function(e) {
    if(!$(this).hasClass('item_box_popup')){
        var index=$('.slide > div').index(this);
            $(this).removeClass('item_box');
            $(this).addClass('item_box_popup');     
        Nomad.config.firstVisibleItem=index;<!--This is to set the position for .item_box_popup-->              
    }           
});

Событие клика для .item_box_popup

$("body").delegate('.item_box_popup .name, .item_box_popup .detail','click', function(e){
  //working code here for this
});

e.stopPropagation(); отключает обработчик щелчков по умолчанию .item_box

Ответы [ 2 ]

5 голосов
/ 13 декабря 2011

Вы должны предотвратить «всплывающее» событие для родительского объекта, используя stopPropagation: http://api.jquery.com/event.stopPropagation/

1 голос
/ 13 декабря 2011

Попробуйте добавить event.preventDefault (); после вызова, который вы хотите выполнить, он останавливает действие по умолчанию, например, действие по умолчанию для элемента.

Я не могу точно сказать, где можно попробовать звонок или он решит вашу проблему, не увидев ваш код js. Html не в том, в чем ваша проблема, а в js-коде, поэтому, если это (или другой ответ, который был опубликован в то время, когда я печатал это!) Не работает, вы можете отредактировать свое сообщение, включив в него js, пожалуйста?

Обновление:

Я скопировал ваш код в JSFiddle и добавил вызов e.stopPropagation () в обработчик кликов item_box, и он работает, как я ожидал: http://jsfiddle.net/chkaQ/2/

Когда вы нажимаете на дочерний элемент item_box, он заменяет его на item_box_popup и не выполняет событие дочернего щелчка item_box_popup ... Я ошибся или вы не хотите этого делать?

...