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

Question

在带有 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();
    });

换句话说，keydown 事件对于 Tab 键和箭头键来说似乎工作方式不同。

此外，JQuery 按键事件根本没有被捕获。

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>

理想情况下，我想将这两 block 代码合并为一个，用一个 switch 语句来处理这一切。我读到浏览器在事件和按键方面有一些怪癖。

大家有什么想法吗？

Chrome版本66.0.3359.139(官方版本)(64位)

JQuery 3.2.1

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

        }
    });