在特定的DOM元素上启用键盘侦听器(ctrl+Z)

Enabling keyboard listener (ctrl+Z) on specific DOM element

本文关键字：侦听器 键盘 ctrl+Z 启用 DOM 元素      更新时间：2023-09-26

我试图绑定键盘事件ctrl+z通过jquery只有当骨干视图被渲染，当视图被删除，我解除绑定它。但问题是，我只想解除当前视图的ctrl+z事件的绑定。

on initialization view:

$(document).keydown(function(e){
                if((e.which === 90 && e.ctrlKey && e.shiftKey) || (e.which === 89 && e.ctrlKey)){
                    console.log('control + shift + z || control + y');
                    //redoAction;
                }
                else if(e.which === 90 && e.ctrlKey){
                    console.log('control + z');
                    //undoAction;
                }          
            });

删除视图:

$(document).off('keydown');

但是最后一条语句将解除所有键盘侦听器的绑定。我不想那样。

在声明中为处理程序函数指定一个名称(或将其赋值给一个变量)。然后您可以使用该名称来引用.off():

中的处理程序。
// Create a named function
function handler (e) {
    if((e.which === 90 ...)
}
// Attach event
$(document).on('keydown', handler);
//Detach event
$(document).off('keydown', handler);

尝试使用"on"处理程序与选择器，然后你可以使用相同的选择器来解除事件与'off'。下面是一个基本的例子，虽然不完全符合你的问题空间，但这个概念应该对你也有用。

<p id="pOne">Click this paragraph to change its background color.</p>
<button id="btn1">Remove the click event with off()</button>
<script>
$(document).ready(function(){
    $(document).on("click","#pOne",function(){ //Notice use of "on" here
        $(this).css("background-color", "pink");
    });
    $("#btn1").click(function(){
        $(document).off('click','#pOne'); 
       //Notice here same selector: #pOne, used with "on"
    });
});
</script>

要检查特定的事件，可以使用handler函数作为最后一个参数，类似于其他jQuery事件。

更多来自jQuery 'Off'文档

您可以利用jQuery的事件命名空间特性:

// Add multiple listeners under the 'foo' namespace.
$(document).on('keydown.foo', handler1);
$(document).on('keyup.foo', handler2);
// Unbind all listeners at once without keeping reference to the various handlers.
$(document).off('.foo');

这实际上是Backbone的View类使用的一个模式，它可以很容易地删除框架添加到视图DOM元素中的所有处理程序。

相关文章：