如何禁用箭头键？

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;

可以找到示例代码fiddlehere

Answer 1

调用 e.stopPropagation() 以防止键盘事件冒泡到父元素。

此修改后的代码将捕获 "ArrowRight" 和 "ArrowLeft" 键。

function ignoreRightOrLeftKeys (e) {
  if (e.key === "ArrowRight" || e.key === "ArrowLeft") {
    e.stopPropagation();
    console.log("itemkeydown stopped");
    return false;
  }
  return true;
}

this.el.dom.addEventListener("keydown", (e) => {
  console.log("keydown caught e:", e);
  return ignoreRightOrLeftKeys(e);
});

this.addListener("itemkeydown", (me, record, item, index, e, eOpts) => {
  console.log("itemkeydown caught e:", e);
  return ignoreRightOrLeftKeys(e);
});

如何禁用箭头键？

How to disable arrow keys?

javascript

extjs

extjs6-classic

extjs6.5