选择组内的多选 - 事件的目标是选择组

Question

我有一个select 和一些optgroups。

<select multiple style="height: 500px; width: 300px">
  <optgroup label="Colours">
    <option value="G">Green</option>
    <option value="B">Blue</option>
    <option value="Y">Yellow</option>
    <option value="W">White</option>
    <option value="P">Pink</option>
  </optgroup>
  <optgroup label="Numbers">
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
    <option value="4">Four</option>
    <option value="5">Five</option>
  </optgroup>
</select>

我希望能够单击optgroup 并选择所有子options。我发现当点击一个单独的option 时，事件仍然被触发，所以通过测试e.target 我可以确定目标是optgroup，然后只选择孩子。

$(document).on("click", "optgroup", function(e) {
  var target = $(e.target);

  console.log(target);

  if (target.is("optgroup")) { 
    target.find("option").prop("selected", true);
  }
});

在这里提琴：https://jsfiddle.net/0z61fzs4/

到目前为止，一切都很好。

但是，请尝试通过单击并拖动来进行多选 - 在下面的 Fiddle 上，只需从“一”向下拖动到“三”。在这种情况下，事件目标最终是 optgroup 本身而不是 option，因此通过以这种方式选择几个选项，您最终会选择 optgroup 中的所有内容。

此行为仅在单击和拖动类型选择时发生。 Ctrl 并单击多选时不会发生这种情况。

此外，如果您“越界”，它就不会发生。例如，在附加的小提琴中，如果您从“White”开始并单击并向下拖动到“Three”，那么您将从两个不同的组中进行多选。在这种情况下，目标最终成为option，并且行为按预期工作。

如何允许我想要的单击拖动类型行为，在单个 optgroup 中选择多个 options 而不触发 JS 并将它们全部选中？

Answer 1

也许你可以看看 mousedown/mousemove 组合？有关更多信息，请参阅此线程：How to distinguish mouse "click" and "drag"

Answer 2

尝试将单击事件更改为 mouseup 事件，看看是否按预期工作。

$(document).on("mouseup", "optgroup", function(e) {
  var target = $(e.target);

  if (target.is("optgroup")) { 
    target.find("option").prop("selected", true);
  };
});

工作示例：https://jsfiddle.net/0z61fzs4/2/