Select2js：捕获按键事件

2022-04-04 00:00:00 google-chrome-extension javascript jquery-select2

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

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

数据-lang="js"数据-隐藏="假"数据-控制台="真"数据-巴贝尔="假">

$(() => {

  $("#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>

为什么用户仍然能够在selt2输入中输入内容(但正确地说，不能在标准输入中输入内容)？我如何才能防止此行为？

解决方案

该事件分两个阶段调度，默认阶段是第二个阶段&冒泡，它首先将事件发送到select2的侦听器所在的最里面的子级，以便它首先看到事件，然后事件冒泡到侦听器看到它的document。

解决方案是在事件下降(从window到document再到body，然后沿着DOM树向下到最里面的元素)的第一个事件阶段&捕获&中添加一个侦听器，方法是使用vanilla DOMaddEventListener，并将第三个参数设置为true。如果在捕获监听程序中停止该事件，则不会在下一阶段(冒泡&q；)中将其调度到监听程序。

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，这是捕获阶段的第二个目标。

相关文章