在.on()中监听shift键,然后使用附加侦听器的元素执行一个函数

时间:2013-08-02 17:58:50

标签: javascript jquery events

我有一个功能,可以按住Shift键

$("fieldset").on("change", "input[type='checkbox'].shift_selectable_box", function () {
    $(document).on("keydown keyup", listening_for_shift);

         var boxes = $(this).closest("fieldset").find("input[type='checkbox']"),
             any_selected = boxes.filter(":checked").size() > 0;

         if (any_selected) {
             $(document).on("keydown keyup", listening_for_shift);

         } else {
              $(document).off("keydown keyup", listening_for_shift);
         }

     });
});

function listening_for_shift(e) {

   if (e.keyCode == 16) {
       if (e.type === "keydown") {
           console.log(e);
        }

        if (e.type === "keyup") {
           console.log(e)
        }

     }

有一种方法,当shift键关闭时,可以在调用listening_for_shift函数的元素上执行某些操作:已更改的input[type=checkbox]元素?

修改

显然,我可以这样做:

    if (any_selected) {
        $(document).on("keydown keyup", function listening_for_shift(e) {

            if (e.keyCode == 16) {
                if (e.type === "keydown") {
                    console.log(self);

                }
                if (e.type === "keyup") {
                    console.log("no shift")
                }
            }

        });

    } else {
        $(document).off("keydown keyup", listening_for_shift);
    }

将添加侦听器。但是我的.off()无法运作。

2 个答案:

答案 0 :(得分:1)

.off()调用中,第二个参数是一个在上下文中不存在的文字,因为处理函数在if块中声明。将您的代码更改为:

function listening_for_shift(e) {
    if (e.keyCode == 16) {
        if (e.type === "keydown") {
            console.log(self);
        }
        if (e.type === "keyup") {
            console.log("no shift")
        }
    }
}

if (any_selected) {
    $(document).on("keydown keyup", listening_for_shift);
} else {
    $(document).off("keydown keyup", listening_for_shift);
}

答案 1 :(得分:0)

您必须在事件处理程序内部之前监听事件,在事件处理程序中已经发生了更改,并且开始检查是否按下了某个键并且更改事件为时已为时已晚复选框无论如何都没有键的概念,因为它不会监听键事件:

$(document).on('keyup keydown', function(e) {
    $(this).data('shift', e.type==='keydown' && e.shiftKey);
});

$(".test").on("change", function (e) {
    if ( $(document).data('shift') ) {
        $(this).prevUntil('[type="checkbox"]:checked')
               .filter('[type="checkbox"]')
               .prop('checked', this.checked);
    }
});

FIDDLE