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

Posted 2023-03-12

【中文标题】Google Chrome、JQuery 和带有键的无法解释的事件行为

【英文标题】：Google Chrome, JQuery and unexplained event behavior with keys

【发布时间】：2018-07-31 11:45:27

【问题描述】：

在带有 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>

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

有人有什么想法吗？

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

jQuery 3.2.1

【参考方案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
                

        
    );