Javascript Google Chrome、JQuery和带有键的无法解释的事件行为

在使用Google Chrome的JQuery中，我必须处理keyup和keydown事件才能使代码正常工作：

        $(".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();
    });

但以下代码仅适用于keydown事件：

    $(".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();
    });

换句话说，对于tab键和箭头键，keydown事件的工作方式似乎有所不同

此外，根本不会捕获jquerykeypress事件

HTML如下所示：

<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>

右派
不对党
授权第三方

理想情况下，我希望将两段代码组合成一段，由一条switch语句处理所有代码。我曾读到浏览器在事件和按键方面有一些怪癖

有人有什么想法吗

Chrome版本66.0.3359.139（官方版本）（64位）

---

JQuery 3.2.1

希望您希望使用最小化的代码来激发所有功能

$(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
                }

        }
    });