2014-04-26 8 views
0

Я не могу шов, чтобы остановить распространение сигнала щелчка на родительский элемент. У меня есть поиск и просмотр многих вопросов здесь, но я не мог найти решение, которое работает. Я тестирую в Firefox.Я не могу прекратить распространение события click на родительский элемент

//this is simply a div element 
$("#" + self.id).css({ 
    "position" : "absolute" 
}); 

$("#" + self.id).append(
    '<div class="onoffswitch" id="'+ self.id + "_checkbox_d" + '">'+ 
     '<input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="'+ self.id + "_checkbox" + 

     (self.isOn ? '" checked>' : '">') + 

     '<label class="onoffswitch-label" for="'+ self.id + "_checkbox" + '">'+ 
      '<div class="onoffswitch-inner"></div>'+ 
      '<div id="switch-mod' + self.id + '" class="onoffswitch-switch onoffswitch-switchon"></div>'+ 
     '</label>'+ 
    '</div>'); 

$("#" + self.id + "_checkbox_d").css({ 
    "position" : "absolute" 
}); 

$('#' + self.id + "_checkbox").click(function(event){ 

    if ($(this).is(':checked')) { 

     $("#switch-mod" + self.id ).removeClass("onoffswitch-switchoff"); 
     $("#switch-mod" + self.id ).addClass( "onoffswitch-switchon"); 
    } 
    else{ 

     $("#switch-mod" + self.id ).removeClass("onoffswitch-switchon"); 
     $("#switch-mod" + self.id ).addClass( "onoffswitch-switchoff"); 
    } 

    event.stopPropagation(); 
    event.stopImmediatePropagation(); 
}); 

$("#" + self.id).click(function() { 

    $('html').trigger("selection-panel-clicked", self.id);   
}); 

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

EDIT 1:

Я думаю, что проблема должна быть с CSS для переключателя флажок/тумблера. Я автоматически создал его здесь, http://proto.io/freebies/onoff/.

Я нахожу, что сначала вызывается обработчик клика родителя, затем вызывается дочерний элемент, а затем родители вызываются снова. Прекращение пропирации не меняет этого. Возврат false приводит только к родительскому, а затем к ребенку, но это также приводит к тому, что тумблер не работает.

Коммутатор включает в себя эти свойства в CSS,

.onoffswitch-switch { 
    -moz-transition: all 0.3s ease-in 0s; -webkit-transition: all 0.3s ease-in 0s; 
    -o-transition: all 0.3s ease-in 0s; transition: all 0.3s ease-in 0s; 
} 

.onoffswitch-inner { 
    -moz-transition: margin 0.3s ease-in 0s; -webkit-transition: margin 0.3s ease-in 0s; 
    -o-transition: margin 0.3s ease-in 0s; transition: margin 0.3s ease-in 0s; 
} 

Может быть, это имеет отношение?

EDIT 2: Я решил решить проблему, взяв ящики из родителя и помещая их вместо этого в родительский родитель, который не отвечает на клики, а затем позиционирует их в зависимости от положения панелей, которые они соответствуют к. Я все равно хотел бы выяснить, почему у меня возникла проблема.

+0

Когда я попробовал это (правда, в странным образом, но все же), ваш код работает для меня в Chrome. Можете ли вы упростить свой код и добавить HTML-код (иметь элемент, динамически добавлять элементы и события и видеть, продолжают ли они распространяться)? – PhistucK

+0

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

ответ

-2

У меня нет проблем с вашим кодом в Firefox 28 или в Chrome 34.x. Какую версию вы используете?

Try удаления

event.stopPropagation(); 
event.stopPropagation(); 

и просто написать

return false; 
+0

'return false;' предотвращает действие по умолчанию, это не останавливает процесс пузырения. – PhistucK

+0

Правильно, и я хорошо знаю об этом, однако с помощью тестового теста, который я написал, он работает так же хорошо: http://jsfiddle.net/yvanavermaet/CDGqd/4/. Проблема должна быть с css или способом создания divs и входов. – yvanavermaet

+0

Флажок не может быть проверен в связанном тестовом примере. – PhistucK

Смежные вопросы