Select2js：捕获按键事件-前端问题

Select2js: catch keydown events(Select2js：捕获按键事件)

本文介绍了Select2js：捕获按键事件的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

由于某种原因，就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="aHR0cHM6Ly9jZG5qcy5jbG91ZGZsYXJlLmNvbS9hamF4L2xpYnMvanF1ZXJ5LzMuMy4xL2pxdWVyeS5taW4uanM="></script>
<script src="aHR0cHM6Ly9jZG4uanNkZWxpdnIubmV0L25wbS9zZWxlY3QyQDQuMS4wLXJjLjAvZGlzdC9qcy9zZWxlY3QyLm1pbi5qcw=="></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，这是捕获阶段的第二个目标。

这篇关于Select2js：捕获按键事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！