Sudipta Maiti Sudipta Maiti - 4 months ago 34
Javascript Question

Javascript event.stopPropagation() doesn't work with `accesskey` attribute

A simple html page contains only two controls, one textbox and one button. After page load if user clicks inside textbox and press “alt” + p (button accesskey) the message should be displayed as “I'm from key down!!!” but if the user clicks anywhere other than inside textbox, the message should be displayed as “I should be called only when the focus is outside the textbox!!!”. Complete code is shown below:

<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<script type="text/javascript">
function keyDown() {
if (event.altKey && event.keyCode == 80) {
event.returnValue = false;
event.cancelBubble = true;
event.keyCode = 0;
alert("I'm from key down!!!");
}
}

function clickMe() {
alert("I should be called only when the focus is outside the textbox!!!");
}
</script>
</head>
<body>

<div>
<input type="text" onkeydown ="keyDown();" />
<input type="button" value="Click me" accesskey="p" onclick="clickMe();" />
</div>

</body>
</html>


It works fine in IE10 and below. But it doesn’t work in IE11 and Chrome, instead it shows two alert messages one after another like “I'm from key down!!!” and “I should be called only when the focus is outside the textbox!!!” which is not desirable. So the
keyDown()
event handler is changed to support IE10+ and Chrome like

function keyDown() {
if (event.altKey && event.keyCode == 80) {
event.preventDefault ? event.preventDefault() : (event.returnValue = false);
event.stopPropagation ? event.stopPropagation() : (event.cancelBubble = true);
event.keyCode = 0;
alert("I'm from key down!!!");
}
}


But in this scenario event.stopPropagation() doesn’t work, any idea why?

Answer

It's just a workaround, can't be a proper solution - the accesskey attribute is the issue, so this attribute to be removed temporarily and add it once again as @gfullam has explained. This can be done effectively by using jquery but it's unknown why stopPropagation() doesn't work.

<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script type="text/javascript">
    function keyDown(evt) {
        var e = evt || window.event;
        if (e.altKey && e.keyCode == 80) {
           //event.returnValue = false;
           //event.cancelBubble = true;
           //event.keyCode = 0;
            var allAccessKeys = $('[accesskey]').each(function () {
                $(this).data('allAccessKeys', $(this).attr 
                ('accesskey')).removeAttr('accesskey');
            });

            alert("I'm from key down!!!");

            setTimeout(function () {
                allAccessKeys.each(function () {
                    $(this).attr('accesskey', $(this).data 
                    ('allAccessKeys'));
                });
            }, 0);
        }
    }

    function clickMe() {
        alert("I should be called only when the focus is outside the textbox!!!");
    }
</script>
</head>
<body>

<div>
    <input type="text" onkeydown="keyDown(event);" />
    <input type="button" value="Click me" accesskey="p" onclick="clickMe();" />
</div>

</body>
</html>