可点击元素内的 CSS3 开关答案

【问题标题】：CSS3 switch inside clickable element可点击元素内的 CSS3 开关
【发布时间】：2016-09-29 23:40:42
【问题描述】：

我有以下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>

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

我正在尝试使整个 <li> 可点击以将 #tab-1 显示为选项卡内容。我可以通过使用 data-target 和 @987654329 定义 <div> 来做到这一点@ 属性。这有效 - 当我单击选项卡显示的 div 时。

不过，<li> 中嵌入了一个 CSS3 开关。 我希望它独立于可点击的 div。

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

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

我尝试使实际隐藏的复选框可见，删除 CSS3 样式，然后单击它。确实有效，那么这与 CSS3 有关系吗？

我想知道这是否与传播有关 - 问题是如果我为 control.select 或 change 设置事件侦听器，我不会收到任何事件 - 只是 div 点击事件。

【问题讨论】：

Event.stopPropagation() 可能会解决您的问题。您需要在输入切换后停止传播，以便事件不会继续到链接上。（如果我理解正确的话）
当显示 CSS3 开关时，单击复选框的事件似乎根本不会发生，只有当 CSS3 漂亮位被剥离并显示时才起作用。 ..我会添加一个澄清。
您的 HTML 无效。 元素input 不得作为a 元素的后代出现。
我想这就是问题所在。
我现在发现它在任何可点击的东西中都不起作用，所以我要重写这个问题。

标签： html twitter-bootstrap css

【解决方案1】：

原来问题出在传播（感谢@TW80000）。

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

检查点击是否在开关内，如果是，则停止传播。

实际上，我已将 Bootstrap 选项卡属性移至 <li>，但我认为任何一种方法都应该可以避免吞下事件。

【讨论】：