Select2js：捕获按键事件答案

【问题标题】：Select2js: catch keydown eventsSelect2js：捕获按键事件
【发布时间】：2021-10-08 22:21:22
【问题描述】：

出于某种原因，就keydown 事件而言，select2js 似乎独立于我的应用程序的其余部分运行。

一个简单的例子是阻止输入：

$(() => {

  $("#select2-div").select2({
    maximumSelectionLength: 5,
    allowClear: true,
    tags: true,
    width: "75%",
    tokenSeparators: [',', ' '],
    dropdownParent: $("#select2-div").parent()
  })

  $(document).keydown((e) =>{
    e.preventDefault();
  })


});

<!doctype html>
<html>
<head>
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
</head>

<body>

<div style="display: flex; justify-content: center; align-items:center; width: 400px;">
  <select multiple id="select2-div">
    <option value="yes">Yes</option>
    <option value="no">No</option>
    <option value="maybe">Maybe</option>
    <option value="idontknow">I don't know</option>
  </select>
  
  <input style="margin-left: 30px; width: 100px"type="text">
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
</body>
</html>

为什么用户仍然可以在 select2 输入中输入内容（但是，正确的是，不能在标准输入中输入）？如何防止这种行为？

【问题讨论】：

标签： javascript google-chrome-extension jquery-select2

【解决方案1】：

事件分两个阶段分派，默认阶段是第二个阶段，“冒泡”，它首先将事件发送到select2的侦听器所附加的最里面的孩子，因此它首先看到事件，然后事件冒泡到您的听众看到的document。

解决方案是在事件下降的第一个事件阶段“捕获”中添加一个侦听器（从 window 到 document 到 body 并沿着 DOM 树向下到最里面的元素），通过使用vanilla DOM addEventListener，第三个参数设置为true。如果您在捕获侦听器中停止事件，则不会在下一阶段（“冒泡”）将其分派给侦听器。

window.addEventListener('keydown', e => {
  e.preventDefault(); // disables the browser's default behavior
  e.stopPropagation(); // disables the bubbling phase listeners
}, true);

禁用在特定元素内按下的单个键：

window.addEventListener('keydown', e => {
  if (e.key === 'Escape' && e.target.closest('.select2-container')) {
    e.preventDefault(); // disables the browser's default behavior
    e.stopPropagation(); // disables the bubbling phase listeners
  }
}, true);

这里也可以使用document，这是捕获阶段的第二个目标。

【讨论】：