now need to do a project to run on a button phone (yes, similar to PHS, but the system is KaiOS), project has multiple routes, many basic components, each component needs to register window.onkeydown events, I now copy and paste each component to re-register, and then remove the keydown event in the beforeRouteLeave hook. And public components such as dialog, actionsheet and other common components also register window.onkeydown events.
would like to consult the senior front-end er, how to manage this kind of problem? And buttons often conflict, because in the case of different components, the events triggered by the left, middle and right buttons at the bottom of the phone"s interface are still different, so it is necessary to add a lot of conditions to judge
.related codes
activated () {
window.addEventListener("keydown", this.onkeyHandle);},
beforeRouteLeave (to, from, next) {
console.log("session list router leave");
window.removeEventListener("keydown", this.onkeyHandle);
next();},
onkeyHandle (evt) {
let key = evt.key;
switch (key) {
case "ArrowUp":
//TODO
break;
case "ArrowDown":
//TODO
break;
case "Enter":
//TODO
break;
case "SoftRight":
//TODO
break;
case "SoftLeft":
// TODO
break;
case "Backspace":
//TODO
break;
default:
console.log("default");
}}