javascript - 当选择菜单关闭或隐藏(从 View 中消失)时需要触发事件。我可以捕获哪个事件来完成此任务？

Question

问题:

我有以下下拉选择菜单。我可以触发 onChange 或 onBlur 事件。但我希望能够在菜单关闭时立即触发一个事件，而不是为了其他任何事情。我怎样才能捕获这一点？

当前实现

模糊有效，但直到我实际单击选择输入字段以外的其他位置时，该事件才会触发。我需要它在选项菜单从 View 中消失时触发

$("select").on("blur", function(event) {
  let id = $(this).attr("id");
  console.log(id);
  //validate.validateInput(this);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select class="form-control" id="patient_registration-patient-province">
  <option class="trn" disabled="" selected="" value="" data-trn-key="select a province">select a province</option>
  <option value="Alberta">Alberta</option>
  <option value="British Columbia">British Columbia</option>
  <option value="Manitoba">Manitoba</option>
  <option value="New Brunswick">New Brunswick</option>
  <option value="Newfoundland">Newfoundland and Labrador</option>
  <option value="Northwest Territories">Northwest Territories</option>
  <option value="Nova Scotia">Nova Scotia</option>
  <option value="Nunavut">Nunavut</option>
  <option value="Ontario">Ontario</option>
  <option value="Prince Edward Island">Prince Edward Island</option>
  <option value="Quebec">Quebec</option>
  <option value="Saskatchewan">Saskatchewan</option>
  <option value="Yukon">Yukon</option>
</select>

Answer 1

更新:

$(document).click(function(event) {
  $target = $(event.target);
  
  if($("select").is(":focus") && !$target.closest('#select').length)
    console.log("click outside");
});

$("select").on("click", function(event) {
  console.log("click option");
})

//$("select").on("mouseleave", () => console.log("left"))

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="select" class="form-control" id="patient_registration-patient-province">
  <option class="trn" disabled="" selected="" value="" data-trn-key="select a province">select a province</option>
  <option value="Alberta">Alberta</option>
  <option value="British Columbia">British Columbia</option>
  <option value="Manitoba">Manitoba</option>
  <option value="New Brunswick">New Brunswick</option>
  <option value="Newfoundland">Newfoundland and Labrador</option>
  <option value="Northwest Territories">Northwest Territories</option>
  <option value="Nova Scotia">Nova Scotia</option>
  <option value="Nunavut">Nunavut</option>
  <option value="Ontario">Ontario</option>
  <option value="Prince Edward Island">Prince Edward Island</option>
  <option value="Quebec">Quebec</option>
  <option value="Saskatchewan">Saskatchewan</option>
  <option value="Yukon">Yukon</option>
</select>