如何禁用箭头键？

Question

我有模板视图（Extjs v6.5），其中导航内置了所有四个（左上右下）键，而我的视图就像一个垂直列表，所以我只想使用上下键并禁用左右键键。

我已经尝试在Ext JS的itemKeyDown事件上禁用按钮

this.addListener('itemkeydown', (me, record, item, index, e, eOpts) => {
  if (e.keyCode === 37 || e.keyCode === 39) {
    return false;
  }
});

并且javascript按钮的keydown事件无法实现。

this.el.dom.addEventListener('keydown', (e) => {
  if (e.keyCode === 37 || e.keyCode === 39) {
    return false;
  }
});

也尝试了e.preventDefault();和return false;

可以找到示例代码小提琴here

Answer 1

您还需要呼叫e.stopPropagation()。代码中的此更改会阻止箭头键起作用。

this.el.dom.addEventListener("keydown", (e) => {
  if (e.keyCode === 38 || e.keyCode === 40) {
    e.preventDefault();
    e.stopPropagation(); // added
    console.log("caught e:", e);
    return false;
  }
});

this.addListener("itemkeydown", (me, record, item, index, e, eOpts) => {
  if (e.keyCode === 37 || e.keyCode === 39) {
    e.preventDefault();
    e.stopPropagation(); // added
    console.log("caught e:", e);
    return false;
  }
});