如何禁用箭头键？

Posted 2023-03-14

【中文标题】如何禁用箭头键？

【英文标题】：How to disable arrow keys?

【发布时间】：2020-05-19 14:26:49

【问题描述】：

我有模板视图（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

【参考方案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);
);