javascript - 防止输入复选框切换

Question

我有一个 <input type="checkbox"> <summary> 内的标签在 <details> 里面, 不幸的是切换了 <details>在选中或未选中时打开或关闭，与 this question concerning space toggling 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。

此外，如果您捕获 <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 来操作可见复选框的状态。首先是事件，像这样:

附言适用于 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>