Question

taken from: https://github.com/keithamus/jwerty

Does anyone know how to unbind after setting up a .key binding?

As a test, I want this set globally when something is selected

jwerty.key('↑', function(e) {
e.preventDefault();
alert('up');
});

then unbound when that object is unselected. That stuff is already set up, inside that unselect statement though I want to call the jwerty unbind but can’t figure out how.

but when I a) don’t know how to unbind it explicitly or b) if I try to change it to a different anonymous function I still see the alert.

Answer 1

If you want a global key handler that can be removed, you have to bind it using jQuery http://jsfiddle.net/mendesjuan/LxQ4H/2/

function doit() {
  alert('up');
}
// to bind use namespaces so it can be unbound without removing
$(document.body).bind('keydown.test', jwerty.event('↑', doit));

// a button that unbinds the key handler
$('#btn').click(function(){
    $(document.body).unbind('keydown.test')
});

If you want the key handler to be scoped to an HTML element, you need to set the listener on the element, not globally. This will only fire if the element that it’s bound to has focus. Just pass in a selector to bind a shortcut local to that element http://jsfiddle.net/mendesjuan/LxQ4H/

jwerty.key('⌃+⇧+P/⌘+⇧+P', function () { [...] }, this, '#myinput');

If your element doesn’t take focus by default (a div), you need to make it focusable by doing the following. http://jsfiddle.net/mendesjuan/LxQ4H/1/

// or 0, 1,2 3 if you want it to be tabbable
document.getElementById('#mydiv').tabIndex = -1; 

These code samples came from https://github.com/keithamus/jwerty (same link you already mentioned)