有关详细信息标签的摘要部分中的复选框输入的问题？答案

【问题标题】：Questions about Checkbox Inputs in the Summary section of a Details tag?有关详细信息标签的摘要部分中的复选框输入的问题？
【发布时间】：2019-02-05 03:42:07
【问题描述】：

我目前在一个网站上工作，该网站使用详细元素填充任务列表，名称在摘要元素中，说明如下。我还想为管理员添加批量选择任务以供批准的功能，但我添加的复选框有一个小问题。我希望它在每个任务的摘要元素中填充的复选框不会导致单击时展开详细信息窗口。

现在基本代码如下：

<detail>
   <summary>Task Name<input type='checkbox'></summary>
   Task Instructions
</detail>

选中复选框时，它会激活整个详细信息元素，从而扩展说明。有没有办法在不导致元素完全停止运行的情况下防止这种情况发生？

整个网站主要使用 JS/JQuery、CSS 和 HTML，所以我有一些可用的选项。

非常感谢！！

【问题讨论】：

将点击事件监听器附加到复选框并在事件上停止传播，这样它就不会冒泡到摘要元素

标签： javascript jquery html css

【解决方案1】：

<details id="mydetails">
    <summary>Click here<input type="checkbox"></summary>
    <p>content</p>
</details>

如果您只是选中复选框，则不应扩展您的整个详细信息元素。在此处查看 JSFiddle：http://jsfiddle.net/ybcarLx7/1/

【讨论】：

我调整了您帖子的格式，要发布代码块，您可以：突出显示代码并按 ctrl+k 自动缩进为代码，或者手动在代码前后放置一个空行代码，每行缩进四个空格。
这真的是评论，而不是答案。多一点代表，you will be able to post comments。见Why do I need 50 reputation to comment? What can I do instead?
感谢 David 和 Barmar。注意点！
即使在 jsfiddle 中，我也遇到了同样的问题。可能是这个办公室使用的浏览器版本有问题吗？
@Enigmatic - 您使用的是什么浏览器以及什么版本？