Prevent default event action not working…?

Question

I'm trying to add keyboard shortcuts on my website to make fast navigation possible using the keyboard. I'm running into a slight problem, however, with my attempted Alt+X shortcut. The event runs just fine and returns false as it should, but the browser's File menu comes up regardless. I've also tried the preventDefault method, but no change.

The cut-down version of the script is:

document.documentElement.onkeydown = function(e) {
    e = e || window.event;
    switch( e.keyCode || e.which) {
        // some cases here - most notably:
        case 116: // F5 key
            if( activeFrame) {
                activeFrame.contentWindow.location.reload();
                // reloads an iframe if one is active
                return false;
            }
            break;
        // more cases...
        case 88: // X key
            if( e.altKey) {
                // do something
                return false;
            }
    }
}

As noted above, overriding the default action of the F5 key works just fine - the browser reloads the page only if no iframe is active. I don't quite see how to prevent the menu from appearing when Alt+X is pressed.

Answer 1

use stopPropagation(e); instead of preventDefault method

function stopPropagation(e)
{
    e = e || event;/* get IE event ( not passed ) */
    e.stopPropagation? e.stopPropagation() : e.cancelBubble = true;
}

Reference link

Another SO question which mentions that preventDefault has issue in IE.

UPDATE

Try using below code as per MSDN Reference

event.returnValue=false;

And some point from Detecting keystrokes

Some general caveats:

• Generally, Mac is less reliable than Windows, and some keys cannot be detected.
• Explorer doesn't fire the keypress event for delete, end, enter, escape, function keys, home, insert, pageUp/Down and tab.
• Onkeypress, Safari gives weird keyCode values in the 63200 range for delete, end, function keys, home and pageUp.Down. The onkeydown and -up values are normal.
• Alt, Cmd, Ctrl and Shift cannot be detected on Mac, except in Opera. However, you can always use the altKey, ctrlKey, and shiftKey properties.

Answer 2

I actually had a web app working just fine with CTRL shortcut keys, but then decided I'd be clever and use the accesskey attribute, and ran into this exact issue with IE.

The problem with going to CTRL shortcut keys is that many of those are more standard/useful across many applications (eg: cut, copy, paste, select all).

Ctrl+Alt is fairly safe, but requires more work on the user's part.

I tend to just try to stick to ALT shortcuts IE doesn't stubbornly insist on handling.

Demo of CTRL + A/CTRL + F being cancelled successfully: http://jsfiddle.net/egJyT/

This answer seems to imply it isn't possible to disable the menu shortcuts without putting IE into kiosk mode.

Answer 3

Beware that if you manage to successfully prevent the browser from detecting a key combination you may make your page unusable for some users. Many screen readers have reserved almost any key you can think of to control the screen reader and if your page was accessible using a screen reader before you added the shortcut key code, it may be completely un-accessible users needing screen readers after you add it.

Read this article about access keys (a bit old but probably still relevant), and this article about Reserved Keystroke Combinations before you invest too much time on this problem.