防止输入复选框切换<详细信息>

Question

我<input type="checkbox">在a <summary>内部有一个标签<details>，不幸的<details>是，在选中或未选中该标签时，它会切换为打开或关闭状态，这与有关空间切换细节的问题不同，但是不幸的是，在我的版本中，无法使用相同的方法来解决Firefox。

请参见以下代码段：

$('input').change(function(e) {
  e.stopPropagation();
  e.preventDefault();
  return false;
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<details>
  <summary>
    <input type="checkbox">
  </summary>
  <div>
 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse finibus bibendum lorem, vitae efficitur felis mattis vitae. Sed mattis tristique rutrum. Morbi a placerat purus, et pulvinar risus. Vivamus accumsan sapien et nisi vulputate blandit. Aenean nec consectetur nulla. Nunc efficitur tincidunt placerat. Vivamus blandit est lectus, ut fermentum velit vulputate ut. Morbi elementum sem massa, eleifend laoreet dui tristique quis. Nulla mi dolor, consectetur blandit fermentum quis, tempor id nisi. Phasellus vel lobortis enim, id blandit turpis. Nullam dapibus feugiat risus eu pharetra. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nam enim justo, pharetra sit amet urna sed, ultricies tempor nibh. 
  </div>
</details>

如何<details>通过选中或取消选中复选框来防止打开/关闭？（除了将<input>标签移到之外的明显答案<summary>。我很好奇为什么会发生这种情况）

编辑

正如@Terry提到并得到我的确认，此问题不会影响Safari或Chrome，甚至Windows上的Firefox的行为也有所不同（它完全忽略了对复选框的单击）。已确认影响OS X Mojave 10.14.4上的Firefox 66.0.2-3。

同样，如果您捕获上的click事件，<summary>并且return false;该复选框仍会切换<details>，即使没有单击，也是<summary>如此。

编辑2

这是Firefox的错误，已在版本67中修复。

Answer 1

欢迎来到不兼容的浏览器世界！：D

首先，应该考虑使用click事件而不是change事件，因为如果用户单击复选框，则首先click触发change事件，然后触发事件，这意味着click事件负责触发行为，而不是change事件。

因此，在Chrome和Firefox中，click对于特殊元素，如事件input，button，textarea认为就在于summary元素冒泡到父details元素，这是一种正常行为，但是有趣的是，该click事件显然只在Chrome忽略无需进一步处理，因此details不会切换元素。您可以尝试使用其他元素（例如button，在Chrome上）进行尝试，而不会发现任何区别。另一方面，无论元素类型如何，Firefox都可以对其进行切换。

因此，要克服此问题，（可以在CSS的帮助下）可以尝试使用ghost checkbox元素（可以说是绝对定位），因此它不是正常文档流程的一部分。它是不可见的，最重要的是，它位于顶部并首先处理click事件，从而操作可见复选框的状态，如下所示：

PS在Firefox和Chrome上均可使用-经过测试。

  
$('input.ghost-checkbox').click(function(e) {
    $(this).next().prop('checked', !$(this).next().prop('checked'));
    return false;
});

 
.ghost-checkbox {
  opacity: 0;
  position: absolute;
  z-index: 2;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<details>
  <summary>
    <span style="overflow: hidden">
      <input type="checkbox" class="ghost-checkbox">
      <input type="checkbox">
    </span>
  </summary>
  <div>
 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse finibus bibendum lorem, vitae efficitur felis mattis vitae. Sed mattis tristique rutrum. Morbi a placerat purus, et pulvinar risus. Vivamus accumsan sapien et nisi vulputate blandit. Aenean nec consectetur nulla. Nunc efficitur tincidunt placerat. Vivamus blandit est lectus, ut fermentum velit vulputate ut. Morbi elementum sem massa, eleifend laoreet dui tristique quis. Nulla mi dolor, consectetur blandit fermentum quis, tempor id nisi. Phasellus vel lobortis enim, id blandit turpis. Nullam dapibus feugiat risus eu pharetra. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nam enim justo, pharetra sit amet urna sed, ultricies tempor nibh. 
  </div>
</details>

Answer 2

此问题已在 Firefox 67 中得到修复。

请参阅https://bugzilla.mozilla.org/show_bug.cgi?id=1524893。

（https://bugzilla.mozilla.org/show_bug.cgi?id=1554691和https://bugzilla.mozilla.org/show_bug.cgi?id=1539490）是该问题的重复项。