Question

这是我的HTML：

<span class="checkbox checked replacement" tabindex="0">
   <span class="check-knob"></span>
   <input type="checkbox" name="data[InfoPagesClient][3][info_page_id]" value="25"                                                                      checked="checked" class="">
</span>
<label for="InfoPagesClient3InfoPageId" class="label">asdasd</label>

现在我想显示隐藏此复选框点击事件的铅笔盒..

javascript：

$("p.checkbox-group span.checkbox").on('click', function(){
    if($(this).hasClass('checked')) {
        $(imgId).hide();
    } else {
        console.log('aaaaaaaaaaa');
        $(imgId).show();
    }
});

$("label.label").on('click', function(e) {
    if ($(this).siblings('span.checkbox').hasClass('checked')) {
        $(imgId).hide();
    } else {
        $(imgId).show();
    }
    e.stopImmediatePropagation();
});

在标签上搞定它会跨越点击事件并打印控制台值...我尝试使用e.stopPropogation（）和stopImmediatePropogation（）..但是ti不起作用..

任何想法？

Answer 1

e.stopPropogation（）或e.stopImmediatePropogation（）将阻止事件冒泡，但不会立即停止事件。

您可以将e.preventDefault（）与e.stopPropogation（）一起使用。 e.preventDefault（）将阻止发生默认事件。您可以在代码中检查以下更改。

$("p.checkbox-group span.checkbox").on('click', function(e){
    e.preventDefault();
    e.stopPropagation();

    if($(this).hasClass('checked')) {
        $(imgId).hide();
    } else {
        console.log('aaaaaaaaaaa');
        $(imgId).show();
    }
});

$("label.label").on('click', function(e) {
    e.preventDefault();
    e.stopPropagation();

    if ($(this).siblings('span.checkbox').hasClass('checked')) {
        $(imgId).hide();
    } else {
        $(imgId).show();
    }
});

Answer 2

当label与for一起使用时，浏览器会自动点击触发“点击”事件的关联控件。这是稍后触发的另一个事件，在您使用e.stopImmediatePropagation();的情况下，它只会停止当前的“点击”事件，并且对关联控件的事件没有影响之后

要解决您的问题，请尝试删除for

使用此：

<label class="label">asdasd</label>

而不是：

<label for="InfoPagesClient3InfoPageId" class="label">asdasd</label>

Answer 3

如果您将id属性添加到复选框，则标签将起作用。然后，您可以按如下方式简化代码：

$(function () {
    $("p.checkbox-group input[type=checkbox]").on('change', function () {
        if (this.checked) {
            $(this).parent().addClass('checked').siblings('a.edit-content').hide();
        } else {
            $(this).parent().removeClass('checked').siblings('a.edit-content').show();
        }
    });
});

http://jsfiddle.net/gFXcm/2/

Answer 4

mmmh，这不是一个功能而不是一个bug吗？不应该点击标签触发与单击“复选框”相同的操作？这正是我猜测使用for属性的原因。

jquery stopPropogation（）没有按预期工作

4 个答案: