hotkeys-js
hotkeys-js copied to clipboard
jaywcjlove
The same shortcuts defines in two modals,when one triggers ,all modal shortcuts' events trigger....
I use react . The question is : I have two modals,A and B. A modal defines shortcuts 'alt+t,alt+r', B's shortcuts are same to A. When A modal does something, it exists in background then B modal show, when keydown 'alt+t,alt+r',both A modal and B modal related event will trigger.How I can avoid this ? I don't want to change different shortcuts between A modal and B modal.....
@wenwen1995
// define shortcuts with a scope
hotkeys('ctrl+o, ctrl+alt+enter', 'A', function(){
console.log('do something');
});
hotkeys('o, enter', 'B', function(){
console.log('do something else');
});
// set the scope (only 'all' and 'issues' shortcuts will be honored)
hotkeys.setScope('B'); // default scope is 'all'
oh, thanks a lot.But when I tried the top code in my file, when I pressed ctrl+o, ctrl+alt+enter, or o, enter, nothing happened...But when I deleted 'A' and ‘B’ scope,it can print console.log code.What happens?
emmm,I 'm sorry to say, I adjust the code order,but when i press key, nothing happens...
The code is like this:
import hotkeys from 'hotkeys-js';
...
hotkeys.setScope('B');
hotkeys('ctrl+o, ctrl+alt+enter', 'A', function(){
console.log('do something');
});
hotkeys('o, enter', 'B', function(){
console.log('do something else');
});
@wenwen1995 You can try this example!
https://codepen.io/jaywcjlove/pen/aXmOyL
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Test Hotkeys example.</title>
</head>
<body>
<div id="hotkey">Press a custom shortcut!</div>
<script type="text/javascript" src="https://unpkg.com/[email protected]/dist/hotkeys.min.js"></script>
<script type="text/javascript">
hotkeys.setScope('A');
hotkeys('ctrl+o, ctrl+alt+enter', 'A', function(event, handler){
document.getElementById('hotkey').innerHTML = 'you pressed ' + handler.key + '!';
console.log('A: do something');
});
hotkeys('o, enter', 'B', function(){
console.log('B: do something');
});
</script>
</body>
</html>
@jaywcjlove ,oh!I tried your example, it works fine.So I think why ...And finally the reason is in my project, react version is 15.x.x,but I npm install the latest hotkeys.js, it requires react 16.x.x.Then I npm install the 2.0.9 .It works fine.Thanks very much !!