Я не могу остановить распространение события click на родительский элемент

0

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

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

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

ИЗМЕНИТЬ 1:

Я думаю, что проблема должна быть связана с css для переключателя checkbox/toggle. Я автоматически создал его здесь, 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;
}

Может быть, это актуально?

РЕДАКТИРОВАНИЕ 2: Я решил решить мою проблему, взяв ящики из родителя и помещая их вместо этого в родительский родитель, который не отвечает на клики, а затем позиционирует их в зависимости от положения панелей, которым они соответствуют. Я все равно хотел бы выяснить, почему у меня возникла проблема.

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

1 ответ

-3

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

Попробуйте удалить

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

и просто напишите

return false;
  • 0
    return false; предотвращает действие по умолчанию, оно не останавливает процесс барботирования.
  • 0
    Правильно, и я хорошо знаю об этом, однако с написанным мною тестовым сценарием он работает так же хорошо: jsfiddle.net/yvanavermaet/CDGqd/4 . Проблема должна быть с CSS или тем, как создаются элементы div и входы.
Показать ещё 2 комментария

Ещё вопросы

Сообщество Overcoder
Наверх
Меню