Google Chrome, JQuery and unexplained event behavior with keys

Question

In JQuery with Google Chrome I have to handle the keyup and keydown events to get this code to work:

        $(".checkbox-detailed").on("keyup keydown",
        function(e) {
            switch (e.which) {
                case 32: // spacebar
                    $(this).find("input:radio").focus().click();
                    break;
                case 39: // left
                    tabLeft($(this).attr("id"));
                    break;
                case 37: // right
                    tabRight($(this).attr("id"));
                    break;
                default:
                    return; // exit this handler for other keys
            }
            e.preventDefault();
    });

But the following code will only work with the keydown event:

    $(".checkbox-detailed").on("keydown",
        function (e) {
            switch (e.which) {
                case 9: // tab
                    // don't go right if shift+tab pressed
                    if (e.shiftKey) {
                        tabLeft($(this).attr("id"));
                    } else {
                        tabRight($(this).attr("id"));
                    }
                    break;
                default:
                    return; // exit this handler for other keys
            }
            e.preventDefault();
    });

In other words the keydown events seem to work differently for tab and arrow keys.

Also the JQuery keypress event is not captured at all.

The HTML is here:

<div id="right-party-div" class="checkbox-detailed" tabindex="0">
    <input type="radio" name="contacttype" id="chk-contact-type-right-party" value="Right Party" class="check-contact" />
    <label for="chk-contact-type-right-party">
        <span class="checkbox-detailed-tbl">
            <span class="checkbox-detailed-cell">
                <span class="checkbox-detailed-title">Right Party</span>
            </span>
        </span>
    </label>
</div>
<div id="wrong-party-div" class="checkbox-detailed" tabindex="1">
    <input type="radio" name="contacttype" id="chk-contact-type-not-right-party" value="Not Right Party" class="check-contact" />
    <label for="chk-contact-type-not-right-party">
        <span class="checkbox-detailed-tbl">
            <span class="checkbox-detailed-cell">
                <span class="checkbox-detailed-title">Not Right Party</span>
            </span>
        </span>
    </label>
</div>
<div id="auth-party-div" class="checkbox-detailed" tabindex="2">
    <input type="radio" name="contacttype" id="chk-contact-type-third-party" value="Authorised Third Party" class="check-contact" />
    <label for="chk-contact-type-third-party">
        <span class="checkbox-detailed-tbl">
            <span class="checkbox-detailed-cell">
                <span class="checkbox-detailed-title">Authorised Third Party</span>
            </span>
        </span>
    </label>
</div>

Ideally I would like to combine the two chunks of code into one, with one switch statement handling it all. I have read that browsers have quirks with events and key presses.

Anyone have any ideas?

Chrome version Version 66.0.3359.139 (Official Build) (64-bit)

JQuery 3.2.1

Answer 1

Hope you wanted to fire all with minimized code.

$(function () {
        var checkboxElement = $(".checkbox-detailed");

        checkboxElement.keydown(function (event) {
            keyEvent(event);
        });

        checkboxElement.keypress(function (event) {
            keyEvent(event);
        });


        checkboxElement.keyup(function (event) {
            keyEvent(event);
        });


        function keyEvent(event) {

            switch (e.which) {
                    case 32: // spacebar
                       //block 1
                        break;
                    case 39: // left
                        //block 2
                        break;
                    case 37: // right
                        // block3
                        break;
                    default:
                        return; // exit this handler for other keys
                }

        }
    });