防止输入复选框切换 <details>

Question

我在<details> 内的<summary> 内有一个<input type="checkbox"> 标签，不幸的是，它会在选中或未选中时切换<details> 以打开或关闭，这与this question concerning space toggling details 不同，但不幸的是不能在我的 Firefox 版本中，我无法使用相同的方法进行修复。

见下sn-p：

$('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 上，位于 summary 元素中的特殊元素（例如 input、button、textarea）的 click 事件会冒泡到父 details 元素，这是一种正常的行为，但有趣的是 click 事件显然只在 Chrome 中被忽略并且没有进一步处理，因此 details 元素不会被切换。您可以在 Chrome 上尝试使用另一个元素，即button，您不会发现任何差异。另一方面，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>

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）是该问题的重复项。

Answer 3

如果我理解的很好，你需要在勾选复选框时隐藏细节，所以你可以使用hidden属性。

let bool = true;
const content = document.getElementById("content");
$('input').change(function(e) {
  bool = !bool;
  if (bool) {
    content.setAttribute("hidden", true);
  } else {
    content.removeAttribute("hidden");
  }
});

<details>
<summary>
  abrir aqui
  <input type="checkbox">
</summary>
<div hidden="true" id="content">
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>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Answer 4

要达到预期结果，请使用以下选项

1. 删除取消选中时打开的属性
2. 点击详细信息时限制打开

$('input').change(function(e) {
if(!$("input").is(':checked')){   
  $('details').removeAttr('open');  
}
  e.stopPropagation();
  e.preventDefault();
  return false;
});



$('details').on('click', function(e) {
 if(!$("input").is(':checked')){
   if(e.target != this) return
       e.stopPropagation();
       e.preventDefault();
    }
});

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

<details id="mydetails">
  <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>

选项2：使用div的显示和隐藏

$('input').change(function(e) {
if(!$("input").is(':checked')){   
  $('details').removeAttr('open');  
}
  e.stopPropagation();
  e.preventDefault();
  return false;
});



$('details').on('click', function(e) {
     if(!$("input").is(':checked')){
       $('div').hide();
       $('details').removeAttr('open');
     }else{
       $('div').show();
     }
       
});

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

<details id="mydetails">
  <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>

Answer 5

试试.triggerHandler() 方法。将您的事件处理程序定义为复选框，然后使用：

$(':checkbox').triggerHandler('click')

将点击事件与触发其他任何事件隔离开来。我没有我的 Mac，因此非常感谢您的反馈。

$(':checkbox').click(function(e) {
  console.log($(this).is(':checked'));
});
$(':checkbox').triggerHandler('click')

details {
  width: 50%
}

summary * {
  display: inline-block;
  cursor: pointer
}

mark {
  float: right
}

<details>
  <summary>
    <input type="checkbox"><mark>TEST</mark>
  </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>

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

Answer 6

你试过event.stopImmediatePropagation()这将停止即时事件