如何禁用箭頭鍵？

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;

示例代碼小提琴可以在這里找到

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);
});