Question

我有以下html：

<li class="list-group-item li-tab-1">
    <div class="list-group-item-desc" data-target="#tab-1" data-toggle="tab">
        <strong>1</strong>
        <div class="small m-t-xs">
            <p>Description</p>
        </div>
        <div class="onoffswitch">
            <input type="checkbox" checked="checked" class="onoffswitch-checkbox" id="tab-1-enabled" /> <label class="onoffswitch-label" for="tab-1-enabled"> <span
                class="onoffswitch-inner"></span> <span class="onoffswitch-switch"></span>
            </label>
        </div>
    </div>
</li>

这是一个Bootstrap选项卡。 .onoffswitch是一个CSS3开关。

我试图让整个<li>可点击以显示#tab-1作为标签内容。我可以通过定义<div>来实现此目的使用data-target和data-toggle属性。这有效 - 当我点击标签显示的div时。

但是，嵌入<li>内部的是一个CSS3开关。 我希望它能够独立于可点击的div工作。

这类似于Links inside of larger clickable areas (CSS Only)，除了嵌套的可点击元素是CSS3开关而不是锚点。

使用锚点外的CSS3开关可以正常工作。

我尝试显示实际的隐藏复选框，删除CSS3样式，然后单击它。的工作原理，这与CSS3有关吗？

我想知道这是否与传播有关 - 麻烦的是，如果我为control.select或change设置事件监听器，我就没有事件 - 只是div click事件。

Answer 1

原来这是问题的传播（感谢@ TW80000）。

$(".list-group-item-desc").click(function(ev) {
    var isSwitchClick = $('.onoffswitch').has($(ev.target)).length > 0;
    if(isSwitchClick) {
        ev.stopPropagation();
    }
});

检查点击是否在交换机内，如果是，则停止传播。

实际上我已经将引导选项卡的位置移到了<li>，但我认为这两种方法都应该可以避免吞噬事件。

CSS3切换内部可点击元素

1 个答案: