我似乎无法停止将click事件传播到父元素

Question

I cannot seam to stop propagation of the click signal to the parent element. I have search and read through a lot of questions here but could not find a solution that works. I am testing in 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 );          
});

The last click handler for the parent element is called which I need to prevent.

EDIT 1:

I think the problem must be with the css for the checkbox/toggle switch. I auto generated it from here, http://proto.io/freebies/onoff/ .

I am finding that first the parent's click handler is called, then the child's is called, and then the parents is called again. Stop propigation doesn't change this. Return false results in just the parent then the child, but this also causes the toggle switch not to work.

The switch includes these properties in 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;
}

Maybe this is relevant?

EDIT 2: I ended up solving my problem taking the boxes out of the parent and putting them instead in the parents parent which doesn't respond to clicks and then positioning them based on the position of the panels they correspond to. I would still like to figure out why I was having the issue though.

Answer 1

I don't have any problem with your code in Firefox 28 nor in Chrome 34.x. Which version are you using?

Try removing

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

and just write

return false;