加入事件按键（使用 keyCode）并点击链接答案

【问题标题】：Join events keypress (with keyCode) and click on link加入事件按键（使用 keyCode）并点击链接
【发布时间】：2014-11-04 11:27:11
【问题描述】：

我的问题很简单，但我没有找到任何解决方案。

我有一个功能：

function toggleLabels(){
    $(".hideable").toggle();
    if($(this).parent().parent().hasClass("selected")) {
        $(this).parent().parent().removeClass("selected");
        $('.preview-toggle .message').text('hide options');
    } else {
        $(this).parent().parent().addClass("selected");
        $('.preview-toggle .message').text('show options');
    }
}

我想通过两个不同的事件来调用：

    $(document).keypress(function(e) {
        if (e.keyCode == 113) { ....

和

    $('.preview-toggle a').click(function() {

可以参加活动吗？我试过 .bind() 但没有任何积极的结果:(

谢谢。法比奥

在尝试了您的建议后，我决定将事件分开并选择这种格式：

var toggleLabels = function(){
        $(".hideable").toggle();
        if($('.preview-toggle').hasClass("selected")) {
            toggleMargins("show");
            $('.preview-toggle').removeClass("selected");
            $('.preview-toggle .message').text('hide options');
        } else {
            toggleMargins("hide");
            $('.preview-toggle').addClass("selected");
            $('.preview-toggle .message').text('show options');
        }
    }
    $('.preview-toggle a').click(function() {
        toggleLabels()
    });
    $(document).keydown(function(e) {
        if (e.keyCode == 113) {
            toggleLabels()
        }
    });

【问题讨论】：

谢谢马丁。我会尽快尝试您的建议。

标签： javascript jquery events keypress keycode

【解决方案1】：

由于这两个事件是在不同的元素（'.preview-toggle a' 和文档）上触发的并且具有不同的类型，因此您无法加入它们。因为点击事件会在 DOM 中冒泡并到达文档，所以您可以像这样将处理程序设置为文档：

var links = $('.preview-toggle a');
$(document).on('keypress click', function(event) {
    if (event.keyCode == 113 || event.type == 'click' && links.index(event.target) > -1)
        toggleLabels();
});

但请注意，jQuery 在后台设置了两个侦听器，一个用于“按键”，一个用于“点击”。唯一的另一种方法是在每个处理程序中使用与回调相同的函数：

$('.preview-toggle a').click(toggleLabels);
$(document).keypress(function(e) {
    if (e.keyCode == 113) toggleLabels();
})

另请注意，this 中的 toggleLabels 关键字在这两种方式下都指向不同的元素。您可能需要将$(this) 替换为$("someSelector")：

顺便说一句：您不应该多次创建具有相同内容的 jQuery 对象。如果您多次需要它，请将其存储在一个变量中并引用该变量：

function toggleLabels(){
    $(".hideable").toggle();
    var par = $(this).parent().parent(); // store jQuery object here
    if(par.hasClass("selected")) { // reference to variable par
        par.removeClass("selected"); // reference again
        $('.preview-toggle .message').text('hide options');
    } else {
        par.addClass("selected");
        $('.preview-toggle .message').text('show options');
    }

}

【讨论】：