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="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

解决方案是在事件下降(从windowdocument再到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:捕获按键事件的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持编程学习网!

本文标题为:Select2js:捕获按键事件

基础教程推荐