Select2js：捕获按键事件 [英] Select2js: catch keydown events
本文介绍了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="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，这是捕获阶段的第二个目标。
这篇关于Select2js：捕获按键事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
