Question

我无法接缝以阻止点击信号传播到父元素。我在这里搜索并阅读了很多问题，但找不到有效的解决方案。我在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。我从这里自动生成了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：我最终解决了我的问题，从父母那里拿出盒子，然后把它们放在父母的父母中，这对父母没有回应，然后根据位置定位它们他们对应的面板。我仍然想知道为什么我遇到这个问题。

Answer 1

我在Firefox 28和Chrome 34.x中的代码没有任何问题。你使用的是哪个版本？

尝试删除

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

然后写下

return false;

我似乎无法阻止点击事件传播到父元素

1 个答案: