javascript - 如何禁用箭头键?
问题描述
我有模板视图(Extjs v6.5),其中导航内置了所有四个(左右上下)键,而我的视图就像一个垂直列表,所以我只想使用上下键并禁用左右键。
我尝试在itemKeyDown
Ext JS 事件上禁用按钮
this.addListener('itemkeydown', (me, record, item, index, e, eOpts) => {
if (e.keyCode === 37 || e.keyCode === 39) {
return false;
}
});
而keydown
javascript按钮的事件无法实现。
this.el.dom.addEventListener('keydown', (e) => {
if (e.keyCode === 37 || e.keyCode === 39) {
return false;
}
});
也试过e.preventDefault();
了return false;
示例代码小提琴可以在这里找到
解决方案
调用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);
});
推荐阅读
- bash - Ansible 使用用户的环境变量以用户身份运行任务
- javascript - Webworkers:页面重新加载后性能不佳
- c# - 如何使用 Xunit 框架在测试用例中测试 Ps cmndlet
- r - 跨多个列突变
- aws-lambda - 后台推送通知仅在 iOS 中一段时间后才开始工作(firebase/aws/xamarin)
- azure - 如何确保在使用 DevOps YAML 管道进入下一阶段之前部署应用程序?
- javascript - 将链接分配到 GAS 上的 HTML 按钮
- ios - 修改应用程序功能是否会使包含此应用程序 ID 的任何配置文件失效?
- machine-learning - 如何在客户代理话语的智能回复中为下游模型构建输入
- google-apps-script - 安装部署的插件后,“谷歌侧面板”中不显示“谷歌工作区私有插件图标”