Join events按键(带keyCode），然后单击链接

Join events keypress (with keyCode) and click on link

本文关键字：然后 单击 链接 keyCode events 按键 Join      更新时间：2023-09-26

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

我有一个功能：

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（），但没有任何积极的结果：（

谢谢。Fabio

在尝试了你的建议后，我决定将事件分开，并选择以下格式：

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

由于这两个事件都是在不同的元素上触发的（'.preview toggle a'和document），并且具有不同的类型，因此无法将它们连接起来。因为点击事件在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在后台为文档设置了两个监听器，一个用于"keypress"，一个表示"click"。唯一的其他方法是在每个处理程序中使用与回调相同的函数：

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

还要注意，在这两种方式中，toggleLabels内的this-关键字指向不同的元素。您可能需要将$(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');
    }

}

相关文章：